我在最新版本 v0.7.1 上遇到了 Nuxt-image 插件的问题:在生产中,图像不是通过 nuxt-image 和默认的 IPX 提供商加载的。
我很难理解这是配置错误、打包/部署问题还是 nuxt / nuxt-image / ipx 的错误。
详情如下:
在开发中,它运行良好:
<nuxt-img>
标签替换为带有 _ipx/ 路径和修饰符的 <img>
标签/_ipx/f_webp,q_80,s_1024x683/images/photos/my-photo.jpg
加载好但是在生产中:
<nuxt-img>
标签替换为带有 _ipx/ 路径和修饰符的 <img>
标签/_ipx/f_webp,q_80,s_1024x683/images/photos/my-photo.jpg
的路径下没有被 IPX 找到,错误:“错误:未找到
在此服务器上找不到请求的 URL /_ipx/f_webp,q_80,s_1024x683/imagesphotos/photo1.jpg。”我已经检查过原始图像确实是从我的静态文件夹中部署的,并且可以在路径/images/photos/my-photo.jpg
这是我的配置:
包.json:
"dependencies": {
"@nuxt/image": "^0.7.1",
...
}
nuxt.config.js :
module.exports = {
ssr: true,
...
modules: [
'@nuxt/image',
...
],
image: {
presets: {
avatar: {
modifiers: {
width: 300,
height: 300,
format: 'webp',
quality: 80,
}
},
webp: {
modifiers: {
format: 'webp',
quality: 80,
}
}
}
},
...
}
在我的 Nuxt 项目页面中的用法:
<nuxt-img preset="webp" src="/images/photos/succes-vente-de-site.jpg"
width="1980" height="1320" sizes="sm:100vw md:100vw lg:100vw" loading="lazy"
class="rounded-2xl w-auto max-h-80" />
Web 应用程序使用 SSR,并通过 Github Actions 部署到 Google App Engine。
如果需要,我也可以分享 Github Action 文件 :)
我在发布之前已经对该主题进行了研究,只发现了类似的问题但不是我的实际情况:
我遇到了同样的问题。我认为你唯一要做的就是遵循正确的步骤:
第一步:(更新nuxt配置文件)
在 nuxt.config.js 中添加图片
image: { domains: [process.env.FRONTENDURL] }
在模块部分添加 @nuxt/image 而不是 buildModules
第 2 步:(tsconfig.json)
将@nuxt/image 添加到类型部分
“类型”:[ @nuxt/图像 ]
这应该放在类型中所有值的末尾
第三步:
第四步:
<nuxt-img src="image path inside static directory" />
前。 <nuxt-img src="helloWorld.jpg"/>