There is a field_image (image) field on the basic content type. Using the Responsive Image, we enabled it on the Default view mode for the field_image field using a Responsive Image style.
The reason why we are setting the Image url as the data-src attribute is because we are using Lazysizes javascript library to lazyload the images. The Responsive Image module outputs using source srcset as separate tags from the img tag.
In my testing, I have found that although the browser fetches whatever size it needs to based on the Responsive Image style configuration, it does not change the image url.
How would we control the output of the image so that we can get the image to display similar to below?
Goal:
- Lazy load images even while using Responsive Image Module
- Output the image field so that the data-src is set, src is not set, and the "lazyload" class is added
Current situation:
<picture>
<source srcset="/image.jpg 1x" media="all and (min-width: 768px)" type="image/jpeg">
<source srcset="/image2.jpg 1x" media="all and (min-width: 320px)" type="image/jpeg">
<img src="/original-image" alt="alt_text" >
</picture>
Desired Output:
<picture>
<source srcset="/image.jpg 1x" media="all and (min-width: 768px)" type="image/jpeg">
<source srcset="/image2.jpg 1x" media="all and (min-width: 320px)" type="image/jpeg">
<img src="/original-image" alt="alt_text" class="lazyload">
</picture>