I'm not able to load the images with the next/image handler from the strapi cms.
the images are working perfectly with the normal tag but not with the next/image handler
My Setup .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',
},
}
Gallery component:
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;
Error Message:
1 of 6 unhandled errors
Unhandled Runtime Error
Error: Failed to parse src "undefined/uploads/Zucker_Nicolas_Gysin_DD_6_237_7b0eee1060.jpeg" on next/image, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)
console.log(src) has a valid url with http://localhost:133/uploadas…
given this question is only 24 days old atm, I presume you use the latest Next.js version (version 9.4 or up).
If that is the case, you should not be defining your environment variables in your next.config.js file. Instead, you should be using your .env.local/ .env file to load and store your env constants.
Additionally you can expose these to the browser directly through starting your declarations with NEXT_PUBLIC_YOUR_VARIABLE.
So technically, your .env should be:
NEXT_PUBLIC_STRAPI_GRAPHQL_API=http://localhost:1337/graphql
NEXT_PUBLIC_API_URL=http://localhost:1337
NEXT_PUBLIC_IMAGES_DOMAIN=localhost