NextJS next/image使用Strapi 4和Graphql解析src失败

Question

我无法使用strapi cms中的next/image处理程序加载图像。

图像与正常标签完美配合，但与next/image处理程序不配合

我的设置.env:

STRAPI_GRAPHQL_API=http://localhost:1337/graphql
API_URL=http://localhost:1337
IMAGES_DOMAIN=localhost

next.config.js:

module.exports = {
reactStrictMode: true,
images: {
domains: [process.env.IMAGES_DOMAIN],
path: '/_next/image', 
loader: 'default',
},
}

画廊组件:

import Image from 'next/image'

const Intro = ({imageGallery}) => {
const { API_URL } = process.env
return (
<div>
{imageGallery.Images.data.map(image => {
const src = API_URL + image.attributes.url
return (
<div key={image.id}>
<Image src={src} width={200} height={200} />
</div>
);
})}
</div>
);
}
export default Intro;

错误信息:

6个未处理错误中的1个

未处理的运行时错误错误:解析src "undefined/uploads/Zucker_Nicolas_Gysin_DD_6_237_7b0eee1060.jpeg"在next/image上，如果使用相对图像，它必须以斜杠"/"或者是绝对URL (http://或https://)

)console.log(src)有一个有效的url: http://localhost:133/uploadas…

Answer 1

考虑到这个问题只有24天的时间，我假设你使用的是最新的Next.js版本(9.4或更高版本)。

如果是这种情况，您应该而不是在next.config.js文件中定义环境变量。相反，您应该使用.env.local/.env文件来加载和存储您的环境常量。

此外，您可以通过以NEXT_PUBLIC_YOUR_VARIABLE开始声明，直接将这些内容暴露给浏览器。

所以严格来说，你的.env应该是:

NEXT_PUBLIC_STRAPI_GRAPHQL_API=http://localhost:1337/graphql
NEXT_PUBLIC_API_URL=http://localhost:1337
NEXT_PUBLIC_IMAGES_DOMAIN=localhost