1

Below is my picture tag

<picture>
          <source
            media="(min-width: 1366px)"
            srcset="/LP/SpecialOffers/EC012722---ScrubBigOPromo-TILESDesktop content tile_grid.jpg?$staticlink$"
          >
          <source
            media="(min-width: 451px)"
            srcset="/LP/SpecialOffers/EC012722---ScrubBigOPromo-TILESTablet content tile_grid.jpg?$staticlink$"
          >
          <source
            media="(max-width: 450px)"
            srcset="/LP/SpecialOffers/EC012722---ScrubBigOPromo-TILESMobile content tile_grid.jpg?$staticlink$"
          >
          <img
            src="/LP/SpecialOffers/EC012722---ScrubBigOPromo-TILESDesktop content tile_grid.jpg?$staticlink$"
            alt="GET YOUR LIP FIX"
          >
</picture>

whatever the size of the window, the fallback img tag gets executed. Can somebody tell me what's the issue here

Praveen Prabhu
  • 49
  • 1
  • 5
  • Does this answer your question? [Image srcset definition not working as expected](https://stackoverflow.com/questions/69755052/image-srcset-definition-not-working-as-expected). It doesnt use a picture tag, the srcset stuff works similar to this tho, maybe it _is working_, youre just testing with a different set of parameters you think you are. – Fabian S. Jan 25 '22 at 07:48
  • How do you know it is not working? As it works for me without any problem. https://codepen.io/sohebm/pen/MWOWWqV – Soheb Jan 25 '22 at 07:50
  • @Soheb I checked the codepen, that's working fine. But in my case, idk why but the fallback image gets loaded for all the screens. – Praveen Prabhu Jan 25 '22 at 08:15

1 Answers1

0

Your space characters in the URLs need to be escaped as %20 in the srcset attribute since there a space will mark the separation between the URL and the width or pixel density descriptor.
It does work in src because there only URLs are expected and the space character has no particular meaning, so browsers can convert it to %20 automagically.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • I tried giving %20 instead of space but still got the same result. Even removed space from the file name but its not working – Praveen Prabhu Jan 25 '22 at 08:17
  • Try to load the URL from the browser's address bar directly and make sure you did escape all the space characters. – Kaiido Jan 25 '22 at 08:22