next.js strapi图像不与下一个图像一起显示

qltillow  于 2023-05-28  发布在  其他
关注(0)|答案(1)|浏览(161)

嗨,我使用strapi作为后端,试图在我的下一个应用程序中显示我的图像。
我从我的apicall中获取URL,但当我将其放入我的图像组件中的SRC中时,它会呈现一个破碎的图像
下面是命名为user的响应,如下所示:

{
    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'
        }
      }
    }
  }

在我组件中,我这样设置一个名为ImageSrc的变量:

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

同样的事情的宽度,高度和alt,我把我的图像组件:

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

和我呈现一个破碎的图像:s和这即使当我把直接网址http://localhost:1337/uploads/bg_Hero_8e1e23dc36.png在我的src
我不明白,有什么想法吗?

相关问题