unable to lazy load images

I am currently doing local web dev using CF workers. I am generating an html using ES6 string interpolation like this

export const header = () => {
    return /*html*/ `
<div class="navbar-start gap-2">

export const header = () => {
    return /*html*/ `
<div class="navbar-start gap-2">

export const header = () => {
    return /*html*/ `
<div class="navbar-start gap-2">

export const header = () => {
    return /*html*/ `
<div class="navbar-start gap-2">

The problem is that when I serve my html, any image (irrespective of where it is hosted) with the property loading="lazy" is simply not being served. if I remove the loading=lazy, it works fine.

When it doesn't works, the browser's network tab doesn't shows the image either.
Is this a know issue?

RickOP•1/24/25, 1:20 PM

This works

<img src="/avatars/32606955_7942348.jpg" alt="logo"/>
<img src="https://digglu.gumlet.io/default_01.png" alt="Gumlet Logo">

<img src="/avatars/32606955_7942348.jpg" alt="logo"/>
<img src="https://digglu.gumlet.io/default_01.png" alt="Gumlet Logo">

This doesn't

<img src="/avatars/32606955_7942348.jpg" alt="logo" loading="lazy"/>
<img src="https://digglu.gumlet.io/default_01.png" alt="Gumlet Logo" loading="lazy">

<img src="/avatars/32606955_7942348.jpg" alt="logo" loading="lazy"/>
<img src="https://digglu.gumlet.io/default_01.png" alt="Gumlet Logo" loading="lazy">

rdutton•1/27/25, 4:33 AM

Did you manage to work out what was going on? To me it sounds like a front-end issue rather than a workers one, particularly since there is nothing in the network tab. Please note, when loading="lazy" is specified on an image element, the browser only loads the resource if the element is 'in view' and this includes if the element has no natural height or width. Given your example code it's indeterminate whether the images have any width/height allocated to them, so try setting the height and width on them and see what happens. e.g.
<img src="/avatars/32606955_7942348.jpg" alt="logo" loading="lazy" height="100" width="100"/><img src="/avatars/32606955_7942348.jpg" alt="logo" loading="lazy" height="100" width="100"/>

RickOP•1/27/25, 8:41 AM

Thanks! it might be the issue with the element not having height or width. Let me check. Thanks for pointing me the right way!

unable to lazy load images

Similar Threads

Similar Threads

Similar Threads