The lazyload placeholder is not being replaced by actual image src in wordpress

Lazyload placeholder not removed

Some images are not displayed because lazyload isn't functioning properly for certain images.

Some img src were rendered correctly, but others were replaced with a lazyload placeholder, such as "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"

Actually, the lazyload isn't occurring correctly. The src should be set from the data-src attribute when I reach the element, but it's not being set correctly. Why is that?

Solution:

If some images render correctly and some do not on the same page, it's likely an issue with an element not a plugin issue. Check whether the element or any parent element is hidden (e.g., display: none).

In my scenario, I added the image in a WYSIWYG editor. When I switched the text from the visual tab, it left an empty space that caused the image to be wrapped with a <p> tag. Upon inspection, I found that the <p> tag was set to display:none. Other images rendered correctly because they were from a normal field.

My scenario:
<div data-autoplay="false" class="wistia lazy-wrapper" data-embed="oide1mmsu4b" >
  <p>
    <img decoding="async" class="lazyload wistia-thumb" src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E" data-src="https://embed-ssl.wistia.com/deliveries/8e6aadawsf10144e92938s6aes607abd8.jpg">
  </p>
  <div class="play-button"></div>
</div>

<style>
  .wistia.lazy-wrapper p {
    display: none;
  }
</style>
So, I simply removed the CSS (display: none) from the 'p' tag, and now it's working fine.

If all images are not rendered properly, there may be an issue with your code or plugin settings.

Thank You!