嗨,我使用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
我不明白,有什么想法吗?
1条答案
按热度按时间m3eecexj1#
我在这里的Image组件解释中使用加载器 prop 修复了这个问题:https://nextjs.org/docs/pages/api-reference/components/image