CODEWITHSUNDEEP
javascriptreactjsnext.jsstrapi
Carol Privat
Carol Privat

Reputation: 31

NextJS next/image Failed to parse src with Strapi 4 and Graphql

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…

Upvotes: 2

Views: 4315

Answers (1)

nuvin.ga
nuvin.ga

Reputation: 21

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

Upvotes: 1

Related Questions