In my nextjs app, I’m fetching a list of strings, that contain embedded <image/> elements. The embedded image sources are external urls.

Example: <svg><image src="https://example.com/image" /></svg>

Because the next/Image component will not fetch embedded external URLs due to browser security restrictions, I’m displaying the SVGs in <object/> elements, which works fine.

I want to preload the images that are embedded in the SVGs, but haven’t been able to get it to work.

I’ve tried preloading the images by extracting the image src urls from the SVG strings, as soon as the svgs are fetched, like:

svgStrings.forEach((svgString) => {
  const url = extractEmbeddedImageUrl(svgString);
  const img = new Image();
  img.src = url;
})

When that runs, I can see the network calls being made for each image url. However, when I load the svgs into <object/> elements, the embedded images are still being fetched, as if they weren’t cached after the first request.

Does this have something to do with the images being embedded in an SVG string, or being rendered in an <object/> element?