Open riccardolardi opened 3 years ago
For what it's worth, I had to do 3 things to get nuxt/image working on Azure:
npm install
part of your deployment, use benv node=14 npm install
instead. This forces Azure's Kudu service to use node 14, instead of 10, to install sharp (which has a prerequisite of Node.js >= 12.13.0).SHARP_IGNORE_GLOBAL_LIBVIPS=1 npm_config_arch=x64 npm_config_platform=linux yarn add sharp
/server/middleware/ipx.js
:
// This grabs the image config from nuxt.config and hands it to the middleware
import { createIPX, createIPXMiddleware } from 'ipx';
import config from '../../nuxt.config.js';
export default createIPXMiddleware(createIPX(config.image));
Referenced in my nuxt.config.js
:
serverMiddleware: [
{ path: '/_ipx', handler: '~/server/middleware/ipx.js' },
],
These three steps were crucial for me to get nuxt/image working in production on Azure App Service.
Thanks @nathanchase I got it to build by overriding Vercel's install
command to SHARP_IGNORE_GLOBAL_LIBVIPS=1 npm_config_arch=x64 npm_config_platform=linux yarn add sharp && yarn install
only now the images on the live site all get 404 when displayed...
Thanks @nathanchase I got it to build by overriding Vercel's
install
command toSHARP_IGNORE_GLOBAL_LIBVIPS=1 npm_config_arch=x64 npm_config_platform=linux yarn add sharp && yarn install
only now the images on the live site all get 404 when displayed...
I believe this is due to the single slash problem talked about at https://github.com/nuxt/image/issues/392. There's a reproduction of this error at https://nuxt-image-2gl6xp7kua-ue.a.run.app/
I got it to build consistently by the help of https://github.com/nuxt/vercel-builder/issues/588 but I'm still facing the 404 issue on all images. Thanks to https://github.com/nuxt/image/issues/434#issuecomment-940650029 the slash issue is temporarily fixed too. Still, on production I get 404 on the images, not locally though. Could it have to do with them being hosted on another server? I've whitelisted it as described in https://image.nuxtjs.org/api/options
image: {
provider: 'ipx',
domains: ['https://cms.blah.com'],
alias: {
cms: 'https://cms.blah.com',
},
},
<nuxt-picture :src="originalSrc.replace('https://cms.blah.com', 'cms')" />
I got it to build consistently by the help of nuxt/vercel-builder#588 but I'm still facing the 404 issue on all images. Thanks to #434 (comment) the slash issue is temporarily fixed too. Still, on production I get 404 on the images, not locally though. Could it have to do with them being hosted on another server? I've whitelisted it as described in https://image.nuxtjs.org/api/options
image: { provider: 'ipx', domains: ['https://cms.blah.com'], alias: { cms: 'https://cms.blah.com', }, },
<nuxt-picture :src="originalSrc.replace('https://cms.blah.com', 'cms')" />
Yeah, it's not that your path to the file is incorrect in your template - it's that ipx is rewriting the path (on the server) without the second /
and thus causing a 404. It's being generated dynamically correctly, but not pointed to correctly.
@nathanchase Thanks - but I'm a bit confused - shouldn't using the alias option (as described in your previous comment) fix the single slash problem?
@nathanchase Thanks - but I'm a bit confused - shouldn't using the alias option (as described in your previous comment) fix the single slash problem?
It did for me, but I'm also not using
Hi folks, I'm facing this exactly problem too. Apparently it's something related with version "@nuxt/image": "0.6.1"
, This is working well with version "@nuxt/image": "0.4.17"
Hope it helps!
This is working well with version
"@nuxt/image": "0.4.17"
I had the same issue with Netlify, and this worked like a charm. But on my local machine, this version of nuxt-image (0.4.17) prevents any run with the error :
GLib-WARNING Failed determine console output code page
So I tried to upgrade to 0.6.0 ( based on the issue #488 ) and it' now working fine locally and on Netlify :)
oh yes i did forgot to change my node version to 14 instead of 12. Thanks my bad.
SSR build failing on Vercel with error
Cannot find module 'sharp'
Probably related to https://github.com/nuxt/image/issues/430
Using this vercel.json:
Here is the complete build log: