0

I have an example with code directly copied from the MDN, except with my own image URLs instead:

<picture>
  <source srcset="/images/site/logo.webp" type="image/webp" />
  <img src="/images/site/logo.png" alt="logo" />
</picture>

Both images ("logo.webp" and "logo.png") work when I browse directly to them. However, when I inspect the above code in my browser, the inspector focuses on the <img> tag, not the <source>. If I then delete the <img>, the image itself disappears from the page ... even though you'd expect it to fall back to the <source>.

It really seems like my <source> isn't even being used, but I don't understand why. Its corresponding image does work (I can even put the .webp path into the <img> tag, and it displays just fine).

What am I not understanding here about <picture> and <source>?

EDIT: Even if I change the HTML itself to the full URL of the PNG file (not even the WebP one), it still doesn't display anything:

<picture>
    <source srcset="http://localhost:3000/images/site/logo.png"> 
</picture>

Shouldn't a single picture/source tag be enough to display an image (again, with a path that works perfectly fine in an <img> tag)? Or am I misunderstanding <picture> somehow?

machineghost
  • 33,529
  • 30
  • 159
  • 234
  • I just found https://stackoverflow.com/questions/39236087/html5-picture-element-does-not-seem-to-be-supported-by-chrome-52-srcset-not-wor which answered my question: the `` is *not* optional! It actually *is* what the browser displays; the picture/source tags simply *set the src of the* ``. Thus, the browser was correctly showing me that I was using the `` ... I just didn't understand the `` was overriding the `` `src` attribute. – machineghost Nov 04 '21 at 17:56
  • 1
    P.S. In the Chrome Dev Tools, if you inspect the `` and hover over the `src` value, Chrome will actually display a box above it that includes "Current source". This will show the *actual* source of the `` (eg. the `.webp` version instead of the `.png` one in my example). – machineghost Nov 04 '21 at 18:01

0 Answers0