Download images from provider

[mrleblanc101]

We are working on a website where we use both the ipx and prismic provider. When we run npm run generate, we see inside .output/public/_ipx that the ipx images from the external domain (swapcard) are downloaded. But this is not the case for images coming from the prismic provider.

We would also like the download the images from prismic provider too. Why ? If we move away from prismic, all our images will stop working even though we statically generated the website ! This doesn't seem right...

[mrleblanc101]

I think this feature request the same or similar to https://github.com/nuxt/image/discussions/1273 which I just found

[mrleblanc101]

I've tried using the ipx provider directly instead of the prismic provider and adding the images.prismic.io to the domains option but, although it work in with npm run dev, it doesn't with npm run generate:

image: {
    provider: 'ipx',
    domains: ['static.swapcard.com', 'images.prismic.io'],
    quality: 70,
    format: ['webp'],
},

Here is what's inside my output folder: .output/public/_ipx/q_70&s_322x375/https:/images.prismic.io/interface-qc/aK-ci2GNHVfTOYwc_Frame54.png%3Fauto=format,compress%26rect=0,0,644,750%26w=322%26h=375

I think this is a problem because the params are encoded. If I copy everything after the .output/public/_ipx/q_70&s_322x375/, and run it through https://urldecode.org/, the image works https:/images.prismic.io/interface-qc/aK-ci2GNHVfTOYwc_Frame54.png?auto=format,compress&rect=0,0,644,750&w=322&h=375

npm run dev (localhost:3000)

npm run generate (random port)

[mrleblanc101]

~~Actually, it's because the url is https://images.prismic.io (double slash) with npm run dev, but https:/images.prismic.io (single slash) with npm run generate 🤔~~

EDIT: Not related after all

npm run dev

npm run generate

[mrleblanc101]

But it works for both npm run dev and npm run generate for our images coming from the swapcard domain:

npm run dev

npm run generate

[mrleblanc101]

The images don't display because of the URL params:

This image won't display: aK-ci2GNHVfTOYwc_Frame54.png%3Fauto=format,compress%26rect=0,0,644,750%26w=322%26h=375

But if I rename to aK-ci2GNHVfTOYwc_Frame54.png, it display properly

[mrleblanc101]

As a workaround, I guess I could remove the query params from the URL. The params are not needed as NuxtImg will do it's own resizing and compression based on the props and nuxt.config.ts options. The annoying part is that <Prismis.io> doesn't return the original URL of the image (without any params).

Se bellow:

I've tested this, and it works even through it ugly.

<NuxtImg :src="speaker.img.url.split('?')[0]" :alt="speaker.img.alt" width="322" height="375" />

[TechAkayy]

The double-slash // issue got fixed in this issue https://github.com/nuxt/image/issues/1084. But, now, when I updated my reproduction (the one in that issue) to v2.0.0, I face the same problem you face.

Updated reproduction from the other closed issue (npm run generate, then npx serve .output/public) - TechAkayy/nuxt-image-generate-issue

This doesn't work (expected) - const src = 'https://images.unsplash.com/photo-1654870468927-92c943da24fe?crop=entropy&cs=srgb&fm=jpg&ixid=M3wyMDkyMnwwfDF8c2VhcmNofDQ5fHxiYWtlcnklMjBjYWtlfGVufDB8fHx8MTY5NTA5NzYyNXww&ixlib=rb-4.0.3&q=85'

Only this works (I encode the query params which is not ideal) - const src = 'https://images.unsplash.com/photo-1654870468927-92c943da24fe%3Fcrop%3Dentropy%26cs%3Dsrgb%26fm%3Djpg%26ixid%3DM3wyMDkyMnwwfDF8c2VhcmNofDQ5fHxiYWtlcnklMjBjYWtlfGVufDB8fHx8MTY5NTA5NzYyNXww%26ixlib%3Drb-4.0.3%26q%3D85'