Description
Which @angular/* package(s) are the source of the bug?
platform-server
Is this a regression?
No
Description
In fresh application created with angular 17.3.4, with SSR and disabled hydration (removed provideClientHydration()
from providers), when I setup html to use html <picture>
element with <ng-container [ngTemplateOutlet]="tmpImg"></ng-container>
inside of it - image lazy loading is not working in Chrome and Safari. For Firefox it works in each case.
Example:
<picture>
<source *ngFor="let source of [1,2,3]"
[srcset]="'https://source.unsplash.com/random/200x300?sig=' + (source + 20 + i)"
[media]="'(min-width: ' + (source * 100) + 'px)'" />
<ng-container [ngTemplateOutlet]="tmpImg"></ng-container>
</picture>
<ng-template #tmpImg>
<img [loading]="loading" [src]="'https://source.unsplash.com/random/200x300?sig=' + i" alt="Alt"
class="list__img" />
</ng-template>
The loading
property inside of the component is public loading = 'lazy'
.
I created three listings with 20 elements with images. Each listing has different images setup, and I see that when <img>
is inside of the <picture>
element directly, without usage of template outlet, lazy loading works fine.
But if there is <ng-container [ngTemplateOutlet]="tmpImg"></ng-container>
that loads <img>
tag instead of placing <img>
directly - lazy loading doesn't work.
Also, if <img>
is placed directly inside of <picture>
, but has *ngIf
attribute on <img>
, lazy loading also doesn't work.
When the hydration is enabled - image lazy loading is working for all scenarios.
Full html could be checked on https://github.com/rmch91/image-lazy-loading/blob/main/src/app/listing2/listing2.component.html
Please provide a link to a minimal reproduction of the bug
https://github.com/rmch91/image-lazy-loading
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version
)
Angular CLI: 17.3.4
Node: 18.14.0
Package Manager: npm 9.3.1
OS: darwin arm64
Angular: 17.3.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr
Browser: Chrome, Safari
Anything else?
No response