Lazy-load plugin

Using the lazy-load plugin within my site to load some images into a Page. I am using the ![](/images/...) {.img-fluid} to reference the image.

However the image does not show, only the text/title of the image.

If I remove the following block from lazy-load.php though the images do show...

$img_srset = $image->getAttribute("srcset");
                    $image->setAttribute("data-src", $img_src);
                    $image->setAttribute("data-srcset", $img_srset);
                    $image->removeAttribute("src");
                    $image->removeAttribute("srcset");

With the block in place the image src is being written as data-src and without it the src is written as src.

Obviously, I shouldn't need to alter the underlying php, so How do I stop or change the src attribute from being written as data-src..?

If I remember correctly, that plugin is based on Lazy-Load.js. The way it's supposed to work is when the script detects the item in viewport (or within the offset), it swaps the data-src into the src. You don't want it to be on src by default (you can have a placeholder) because those will be processed by the browser and downloaded on page load.

From the sounds of it, the script isn't firing on these elements. Did you verify that .img-fluid is the trigger class? You could try temporarily adding some console.logs to the relevant script .js so that you get some ideas on what is happening and when.

take a look here: /forum/themes-styling/solved-lazyloading-images-with-data-src-and-data-srcset-t943

no need for the lazyload plugin :)