Option to use internal IPX service to process+save external images @ prerendered/generate

[luisjoserivera]

Not sure even if this is currently possible. I did my research but no related results found.

Many times I've been in the situation where I nuxt generate a site or prerender some routes with content provided by a headless cms (eg: Storyblok) and I wished the images were processed by the internal IPX instead of the external provider image service.

Most of the time I do generate or prerender a route is to drastically improve load times. Having the images already optimized and bundled in like the content would be even better.

Making this work should be pretty similar to standard Static Images but with the additional step of copying the remote image during the prerendering steps of a route.

Flow: Download/copy remote image > Process with internal IPX > Save it as a local asset

This could be set as a global config:

image: {
  saveOnPrerender | prerenderProviders | prerenderExternals : true
}

or as a prop for <nuxt-img save-on-prerender provider="myextprovider" :src="https://myextprovider/cat.jpg" format="webp" />

What do you think?

[edimitchel]

@danielroe is it something already doable ?

[codeflorist]

This is already doable, yes. You should just have to state the domain of the external images in the domains option (see docs).

Two caveats though:

• On Windows this will only work, if you also use the alias option, since otherwise ipx would want to create a folder not allowed on Windows filesystems (see this issue)
• By default this will only work using nuxt generate, since only then static images are written. If you also want static images using nuxt build (e.g. if you want server routes on a primarily prerendered site), you will manually have to state ipxStatic instead of ipx in NuxtImage's provider option. For images to also work in dev mode, use provider: process.env.NODE_ENV === 'development' ? 'ipx' : 'ipxStatic',.