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

Question

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…