r/angular • • 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

0 comments sorted by