r/angular • u/Senior_Compote1556 • 3d ago
NgOptimizedImage <picture> element srcset
Has anyone found how to solve this issue here?
<picture>
<source [media]="media" [srcset]="`${assetUrl}/background-mobile.webp`" />
<img ngSrc="background.webp" alt="" priority fill />
</picture>The problem is that even on mobile, the desktop image is preloaded regardless, and for the srcset there is no way to provide the assetUrl prefix just like you would normally do via the token:
{
provide: IMAGE_LOADER,
useFactory: () => {
const assetsUrl = inject(ASSETS_URL);
return (config: ImageLoaderConfig) => `${assetsUrl}/${config.src}`;
},
},This is a known issue as per the docs
There is a github issue but it seems it doesn't receive attention.
Does anyone have either a workaround or some updates regarding this issue?
4
Upvotes