Open AaronBeaudoin opened 8 months ago
What's the url of the images in production? Is it something like /_ipx/... ?
No, the URL is still just /cat.jpg
.
The reproduction is right there. Deploy it and see for yourself.
Indeed.
Deployed to Cloudflare: not working, are rather the src was not changed
<img src="/cat.jpg" onerror="this.setAttribute('data-error', 1)" width="1024" data-nuxt-img="" srcset="/cat.jpg 1x, /cat.jpg 2x">
Deployed to Vercel: working
<img src="/_vercel/image?url=/cat.jpg&w=1024&q=1" onerror="this.setAttribute('data-error', 1)" width="1024" data-nuxt-img="" srcset="/_vercel/image?url=/cat.jpg&w=1024&q=1 1x, /_vercel/image?url=/cat.jpg&w=1536&q=1 2x">
Maybe IPX doesn't run on CF runtime? Maybe something here with the baseUrl? https://github.com/nuxt/image/blob/58c5139106ed1552a98d318b5ca281e298c36180/src/runtime/providers/ipx.ts#L28C1-L30C4
We're having the same issue with Deno Deploy and Cloudflare Pages combined with the IPX provider. Works fine with self hosted PM2 & Vercel for example.
Have managed to solve this somehow using a different configuration or setting?
@adamskyle My current alternative until this is fixed is the following Custom Provider for Cloudflare Images:
import { encodeQueryItem, joinURL } from "ufo";
import { createOperationsGenerator } from "#image";
import type { ProviderGetImage } from "@nuxt/image";
const operationsGenerator = createOperationsGenerator({
keyMap: {
width: "w",
height: "h"
},
joinWith: ",",
formatter: (key: string, value: string) => {
return encodeQueryItem(key, value);
}
});
export const getImage: ProviderGetImage = (src, options) => {
const base = "https://imagedelivery.net/<YOUR_ACCOUNT_HASH>";
const operations = operationsGenerator(options.modifiers);
return { url: joinURL(base, src, operations) };
};
Replace <YOUR_ACCOUNT_HASH>
with your value from the Cloudflare Images dashboard page. Also, you should be able to add options in addition to width
and height
to the keyMap
config by following the docs here.
Managing the images this way is a lot more tedious than just storing them in the repository though.
I am not using cloudflare, but I had a similar problem with SSR and PM2, where images were not loading. I installed sharp
as a dev dependency (e.g. yarn add -D sharp
) and after build it worked.
Same problem
same here with netlify !
Any updates about this bug?
Just using the workaround suggested by @AaronBeaudoin at the moment.
Would love to contribute but I'm afraid this is a bit ambitious for a first PR here for me. Could be a bug in nuxt-image, but I can't rule out ipx or even nitro.
Some insights / attention from the nuxt team would be really great, the reproduction speaks for itself I think.
Same here. If I have a <NuxtImg provider="cloudflare">
, it resizes using Cloudflare fine, but if I have a <NuxtImg provider="ipx">
, it does not work. The HTML renders out a path to /_ipx/...
, but the image is 404. It works perfectly fine locally - it just breaks when deployed on Cloudflare pages.
FWIW, I believe this is a Sharp limitation: https://github.com/lovell/sharp/issues/2863
Looks like it is indeed sharp (or unjs/ipx which uses sharp) See also https://github.com/unjs/ipx/pull/190 where it is also noted as following: It is still Node.js only. Workers without thread support do not work!
CF Workers and Pages seems to be single threaded.
I unexpectedly ran into the same issue when I tried to deploy a page on GitHub pages
@nathanchase What's your workaround like with the provider="cloudflare"
? Or is it the same as https://github.com/nuxt/image/issues/1061#issuecomment-1786093586 where you need to upload the images to cloudflare separately?
@nathanchase What's your workaround like with the
provider="cloudflare"
? Or is it the same as #1061 (comment) where you need to upload the images to cloudflare separately?
My workaround at the moment is to not use ipx in production if deployed to Cloudflare Pages, but use some other image provider (like Cloudflare themselves, or weserv, or imagekit, or any others that do the processing elsewhere).
Doesn't the following comment solve an issue for you?
I'm also experiencing this issue, I would like to not build an entirely static website and want to benefits of ipx pre-rendered images. I think I found a temporary solution for it. Following the documentation of this page https://image.nuxt.com/advanced/static-images, it seems that if the route of the images are declared as pre-rendered it will work. I found a way to autogenerate them by using this configuration in nuxt.config.ts
{
image: {
provider: 'ipxStatic',
},
modules: [
"@nuxt/image",
"nitro-cloudflare-dev",
],
nitro: {
preset: "cloudflare-pages",
prerender: {
routes: ['/'],
crawlLinks: true,
},
},
}
By defining ipxStatic
as a provider, it forces @nuxt/image
to create the pages for the images and with crawlLinks: true
and a sensible routes
configuration, it will crawl all the images and pre-render them.
It would be great that we could have a config that just automatically tags the ipx images as pre-rendered but that's all I found for now.
has anyone come up with a solution for this?
Any update? Even Cloudflare workers paid plan doesn't help.
I'm having the same problem. Already tried all the suggested fixes but nothing worked.
Looks like it is indeed sharp (or unjs/ipx which uses sharp) See also unjs/ipx#190 where it is also noted as following: It is still Node.js only. Workers without thread support do not work!
CF Workers and Pages seems to be single threaded.
@cf-wasm/photon might work as replacement for IPX on workers
Info
Darwin
v18.18.2
3.8.0
3.9.1
2.7.0
npm@9.8.1
-
modules
,nitro
,experimental
@nuxt/image@1.0.0
-
Reproduction
https://github.com/AaronBeaudoin/nuxt-image-issue-1
Description of Issue
In the reproduction above there is a minimal
app.vue
like this:As you can see, the quality is set to 1. This is so that you can see very obviously that image processing is occurring. If you run
npm run dev
you'll see that the image looks like crap, so you know that IPX is working great.But now, deploy the reproduction to Cloudflare Pages. After doing so, go to the deployed URL and you'll see this:
Obviously image processing is not working.