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.

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.
Notifications
You’re not receiving notifications from this thread.
© 2022 GoRails, LLC