image
image copied to clipboard
nuxt
No image processing occurs after deployment (Cloudflare Pages)
Info
- Operating System:
Darwin - Node Version:
v18.18.2 - Nuxt Version:
3.8.0 - CLI Version:
3.9.1 - Nitro Version:
2.7.0 - Package Manager:
[email protected] - Builder:
- - User Config:
modules,nitro,experimental - Runtime Modules:
@nuxt/[email protected] - Build Modules:
-
Reproduction
https://github.com/AaronBeaudoin/nuxt-image-issue-1
Description of Issue
In the reproduction above there is a minimal app.vue like this:
<template>
<div>
<h1>Nuxt Image Test</h1>
<NuxtImg src="/cat.jpg" width="1024" quality="1"/>
</div>
</template>
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.
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.
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).
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.
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
I managed to solve the problem by changing the build command from npm run build to npm run generate.
If you are building a static site using nuxt generate, Nuxt Image will optimize and save your images locally when your site is generated - and deploy them alongside your generated pages. Nuxt Images
nuxt ^3.12.4 @nuxt/image ^1.7.0
My project is a simple blog using @nuxt/content.
