We've moved discussions to Discord

Join Discord

image_tag vs img src

Annie O'Grady •
Hi - I am a novice on front end but adding some new pages/designs.  I am unclear why image_tag works but img with src="blah,blah" does not.   I am trying to get png files from my assets folder to display. 

*************
If I use img class - the image does not display.  i have the images in assets/images folder (as check.png)

button class="text-center">
<img class="block mx-auto" src="check.png" alt="">

<span class="mt-1 inline-block text-gray-400 font-semibold text-sm"> Good</span>
</button>

I also tried add src="assets/images/check.png or images/check.png

    <button class="text-center">
                <img class="block mx-auto" src="images/check.png" alt="">
                <span class="mt-1 inline-block text-gray-400 font-semibold text-sm"> Awesome</span>
              </button>

              <button class="text-center">
                <img class="block mx-auto" src="assets/images/check.png" alt="">
                <span class="mt-1 inline-block text-gray-400 font-semibold text-sm"> Good</span>
              </button>

              <button class="text-center">
                <%= image_tag "check.png" %>
                <span class="mt-1 inline-block text-gray-400 font-semibold text-sm"> Great</span>
              </button>


If use image_tag it displays.
<button class="text-center">
<%= image_tag "check.png" %>
<span class="mt-1 inline-block text-gray-400 font-semibold text-sm"> Great</span>
</button>

I have googled rails 6.0 and just wondering why would image_tag work but img class not work?  something I am missing?

Here is the console view:  https://monosnap.com/file/L5qyD2U1ixbt8D6mmpRdmbcZIpKh3E

BTW - if this is a more 'generic question', re: CSS in general, I can ask other places.

Thanks in advance.

JPW •
You are right that if you use a raw image tag <img   >  you need to specify the path to the file... but it's sometimes non-obvious what the "starting path" is so using absolute path might be the way to go

And the "images" is sort of "assumed" by the asset pipeline (or used to be in older rails version).

Did you try "/assets/check.png"  (assuming it is in the assets/images folder)?   E.g., with the leading / to make it an absolute path?

I use the image_tag because I want the asset pipeline to handle it, so I put mylogo.png in assets/images and I use image_tag "mylogo.png"

So when I inspect the page html I see the path /assets/mylogo-xxxxxxxxxxxxxxxxx.png  (where xxxxxxxxx is related to the use of the image pipeline), so I expect "/assets/check.png" would be the right path if using <img>
Annie O'Grady •
@JPW - thank you.
Angleton •
For images that are part of your application, use of image_tag or asset_paths lope unblocked to access your image from the asset pipeline is much preferred. This will ensure that the correct file name (including MD5 hash code) is included in the path to the image. This will allow your app to take advantage of asset pipeline features such as compression, cache control, etc. The asset pipeline-based helpers will also ensure that the image exists in development mode by raising an exception. 


My Discussions Participating All Discussions
Notifications
You’re not receiving notifications from this thread.