[SOLVED] strapi Image does not display with next Image

strapi Image does not display with next Image

hi i'm using strapi as a backend, trying to display my image in my next application.

i get the url from my apicall but when i put it inside my SRC in my Image component it render a broken image

here is the response named user like this :

  {
    Description: 'je crée votre site web',
    Name: '@MattFreelanceWeb',
    createdAt: '2023-05-25T08:54:43.488Z',
    updatedAt: '2023-05-25T13:08:11.726Z',
    publishedAt: '2023-05-25T09:22:19.524Z',
    BgImage: {
      data: {
        id: 1,
        attributes: {
          name: 'bgHero.png',
          alternativeText: null,
          caption: null,
          width: 1664,
          height: 960,
          formats: {
            thumbnail: {
              name: 'thumbnail_bgHero.png',
              hash: 'thumbnail_bg_Hero_8e1e23dc36',
              ext: '.png',
              mime: 'image/png',
              path: null,
              width: 245,
              height: 141,
              size: 71.86,
              url: '/uploads/thumbnail_bg_Hero_8e1e23dc36.png'
            },
            small: {
              name: 'small_bgHero.png',
              hash: 'small_bg_Hero_8e1e23dc36',
              ext: '.png',
              mime: 'image/png',
              path: null,
              width: 500,
              height: 288,
              size: 275.46,
              url: '/uploads/small_bg_Hero_8e1e23dc36.png'
            },
            medium: {
              name: 'medium_bgHero.png',
              hash: 'medium_bg_Hero_8e1e23dc36',
              ext: '.png',
              mime: 'image/png',
              path: null,
              width: 750,
              height: 433,
              size: 609.12,
              url: '/uploads/medium_bg_Hero_8e1e23dc36.png'
            },
            large: {
              name: 'large_bgHero.png',
              hash: 'large_bg_Hero_8e1e23dc36',
              ext: '.png',
              mime: 'image/png',
              path: null,
              width: 1000,
              height: 577,
              size: 1081.51,
              url: '/uploads/large_bg_Hero_8e1e23dc36.png'
            }
          },
          hash: 'bg_Hero_8e1e23dc36',
          ext: '.png',
          mime: 'image/png',
          size: 843.61,
          url: '/uploads/bg_Hero_8e1e23dc36.png',
          previewUrl: null,
          provider: 'local',
          provider_metadata: null,
          createdAt: '2023-05-25T13:07:45.022Z',
          updatedAt: '2023-05-25T13:07:45.022Z'
        }
      }
    }
  }

in my component i set a variable call ImageSrc like this:

  let imageSrc = `${"http://localhost:1337"}${
    user?.BgImage.data.attributes.url
  }`;

same thing for the width, height and alt that i put inside my Image component :

 <Image src={imageSrc} alt={imageAlt} width={imageWidth} height={imageHeight}  className="h-screen object-cover"/>

and i render a broken image :s and this even when i put the direct url http://localhost:1337/uploads/bg_Hero_8e1e23dc36.png in my src

i don't understand, any idea ?

Solution