如何在反应前端显示来自 strapi 的图像？
How to display image from strapi in react frontend?
我目前正在使用 Strapi 作为 CMS 并在前端使用 Next.js (React) 的网站。该站点还有一个图像滑块，其中显然包含图像、标题和描述。我已经创建了一个函数来获取标题和描述，但不知何故这不适用于图像。
那么我需要更改什么才能在我的网页中显示媒体？当前代码如下所示：（文件：/components/image-slider.js）：
import React from "react";
const Slider = ({}) => {
const [banners, setBanners] = React.useState(null);
React.useEffect(() => {
const getBanners = async() => {
const res = await fetch("http://localhost:1337/banners/");
const json = await res.json();
setBanners(json);
}
getBanners();
}, [])
if (typeof window !== 'undefined') {
// makes image slider working
}
return (
<div className="img-slider">
<div className="slide active">
<div className="info">
{banners ? banners.filter(function (banner) {
return banner.Title === "Musik"
}).map((banner) =>
<h2 key={banner.Id}>{banner.Title}</h2>
) : (
<div>Loading...</div>
)}
{banners ? banners.filter(function (banner) {
return banner.Title === "Musik"
}).map((banner) =>
<p key={banner.Id}>{banner.Content}</p>
) : (
<div>Loading...</div>
)}
{banners ? banners.filter(function (banner) {
return banner.Title === "Musik"
}).map((banner) =>
<img className="slider-image">{ ? what do I have to put here? / what do I have to change? }</img>
) : (
<div>Loading...</div>
)}
</div>
</div>
<div className="slide">
<div className="info">
{banners ? banners.filter(function (banner) {
return banner.Title === "Sport"
}).map((banner) =>
<h2 key={banner.Id}>{banner.Title}</h2>
) : (
<div>Loading...</div>
)}
{banners ? banners.filter(function (banner) {
return banner.Title === "Sport"
}).map((banner) =>
<p key={banner.Id}>{banner.Content}</p>
) : (
<div>Loading...</div>
)}
</div>
</div>
{/* Futher slides */}
<div className="navigation">
<div className="btn-navig active"></div>
<div className="btn-navig"></div>
<div className="btn-navig"></div>
</div>
</div>
)
}
export default Slider;
...下面是我从 Strapi API 返回的数据，如下所示：（其中仅填充了样本图片、标题和描述...）
[
{
"id":1,
"Title":"Musik",
"Content":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
"published_at":"2021-04-23T07:32:10.839Z",
"created_at":"2021-04-23T07:32:08.130Z",
"updated_at":"2021-04-23T07:32:10.883Z",
"Cover":[
{
"id":9,
"name":"we-love-pizza.jpg",
"alternativeText":null,
"caption":null,
"width":3782,
"height":2522,
"formats":{
"thumbnail":{
"name":"thumbnail_we-love-pizza.jpg",
"hash":"thumbnail_we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"width":234,
"height":156,
"size":13.75,
"path":null,
"url":"/uploads/thumbnail_we_love_pizza_d16dd21274.jpg"
},
"large":{
"name":"large_we-love-pizza.jpg",
"hash":"large_we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"width":1000,
"height":667,
"size":180.46,
"path":null,
"url":"/uploads/large_we_love_pizza_d16dd21274.jpg"
},
"medium":{
"name":"medium_we-love-pizza.jpg",
"hash":"medium_we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"width":750,
"height":500,
"size":106.25,
"path":null,
"url":"/uploads/medium_we_love_pizza_d16dd21274.jpg"
},
"small":{
"name":"small_we-love-pizza.jpg",
"hash":"small_we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"width":500,
"height":333,
"size":52.59,
"path":null,
"url":"/uploads/small_we_love_pizza_d16dd21274.jpg"
}
},
"hash":"we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"size":955.02,
"url":"/uploads/we_love_pizza_d16dd21274.jpg",
"previewUrl":null,
"provider":"local",
"provider_metadata":null,
"created_at":"2021-04-20T17:42:20.277Z",
"updated_at":"2021-04-20T17:42:20.277Z"
}
]
},
{
"id":2,
"Title":"Sport",
"Content":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
"published_at":"2021-04-24T11:56:58.633Z",
"created_at":"2021-04-24T11:56:56.191Z",
"updated_at":"2021-04-24T11:56:58.697Z",
"Cover":[
{
"id":8,
"name":"beautiful-picture.jpg",
"alternativeText":null,
"caption":null,
"width":3824,
"height":2548,
"formats":{
"thumbnail":{
"name":"thumbnail_beautiful-picture.jpg",
"hash":"thumbnail_beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"width":234,
"height":156,
"size":6.44,
"path":null,
"url":"/uploads/thumbnail_beautiful_picture_06a43830c6.jpg"
},
"large":{
"name":"large_beautiful-picture.jpg",
"hash":"large_beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"width":1000,
"height":666,
"size":83.56,
"path":null,
"url":"/uploads/large_beautiful_picture_06a43830c6.jpg"
},
"medium":{
"name":"medium_beautiful-picture.jpg",
"hash":"medium_beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"width":750,
"height":500,
"size":47.82,
"path":null,
"url":"/uploads/medium_beautiful_picture_06a43830c6.jpg"
},
"small":{
"name":"small_beautiful-picture.jpg",
"hash":"small_beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"width":500,
"height":333,
"size":23.36,
"path":null,
"url":"/uploads/small_beautiful_picture_06a43830c6.jpg"
}
},
"hash":"beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"size":585.12,
"url":"/uploads/beautiful_picture_06a43830c6.jpg",
"previewUrl":null,
"provider":"local",
"provider_metadata":null,
"created_at":"2021-04-20T17:42:20.163Z",
"updated_at":"2021-04-20T17:42:20.163Z"
}
]
},
{
"id":3,
"Title":"Kunst",
"Content":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
"published_at":"2021-04-24T11:57:31.725Z",
"created_at":"2021-04-24T11:57:15.225Z",
"updated_at":"2021-04-24T11:57:31.794Z",
"Cover":[
{
"id":6,
"name":"this-shrimp-is-awesome.jpg",
"alternativeText":null,
"caption":null,
"width":1200,
"height":630,
"formats":{
"thumbnail":{
"name":"thumbnail_this-shrimp-is-awesome.jpg",
"hash":"thumbnail_this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"width":245,
"height":129,
"size":9.43,
"path":null,
"url":"/uploads/thumbnail_this_shrimp_is_awesome_4167fb0adc.jpg"
},
"large":{
"name":"large_this-shrimp-is-awesome.jpg",
"hash":"large_this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"width":1000,
"height":525,
"size":72.87,
"path":null,
"url":"/uploads/large_this_shrimp_is_awesome_4167fb0adc.jpg"
},
"medium":{
"name":"medium_this-shrimp-is-awesome.jpg",
"hash":"medium_this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"width":750,
"height":394,
"size":48.38,
"path":null,
"url":"/uploads/medium_this_shrimp_is_awesome_4167fb0adc.jpg"
},
"small":{
"name":"small_this-shrimp-is-awesome.jpg",
"hash":"small_this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"width":500,
"height":263,
"size":26.69,
"path":null,
"url":"/uploads/small_this_shrimp_is_awesome_4167fb0adc.jpg"
}
},
"hash":"this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"size":95.48,
"url":"/uploads/this_shrimp_is_awesome_4167fb0adc.jpg",
"previewUrl":null,
"provider":"local",
"provider_metadata":null,
"created_at":"2021-04-20T17:42:19.639Z",
"updated_at":"2021-04-20T17:42:19.639Z"
}
]
}
]
希望有人能帮助我 - 谢谢！
我没有完全理解这个问题。我猜你是问为什么图片不显示。当 strapi returns 时，它作为路径出现，而不是作为基础 url。如果你尝试 
我想问题就解决了。
我目前正在使用 Strapi 作为 CMS 并在前端使用 Next.js (React) 的网站。该站点还有一个图像滑块，其中显然包含图像、标题和描述。我已经创建了一个函数来获取标题和描述，但不知何故这不适用于图像。
那么我需要更改什么才能在我的网页中显示媒体？当前代码如下所示：（文件：/components/image-slider.js）：
import React from "react";
const Slider = ({}) => {
const [banners, setBanners] = React.useState(null);
React.useEffect(() => {
const getBanners = async() => {
const res = await fetch("http://localhost:1337/banners/");
const json = await res.json();
setBanners(json);
}
getBanners();
}, [])
if (typeof window !== 'undefined') {
// makes image slider working
}
return (
<div className="img-slider">
<div className="slide active">
<div className="info">
{banners ? banners.filter(function (banner) {
return banner.Title === "Musik"
}).map((banner) =>
<h2 key={banner.Id}>{banner.Title}</h2>
) : (
<div>Loading...</div>
)}
{banners ? banners.filter(function (banner) {
return banner.Title === "Musik"
}).map((banner) =>
<p key={banner.Id}>{banner.Content}</p>
) : (
<div>Loading...</div>
)}
{banners ? banners.filter(function (banner) {
return banner.Title === "Musik"
}).map((banner) =>
<img className="slider-image">{ ? what do I have to put here? / what do I have to change? }</img>
) : (
<div>Loading...</div>
)}
</div>
</div>
<div className="slide">
<div className="info">
{banners ? banners.filter(function (banner) {
return banner.Title === "Sport"
}).map((banner) =>
<h2 key={banner.Id}>{banner.Title}</h2>
) : (
<div>Loading...</div>
)}
{banners ? banners.filter(function (banner) {
return banner.Title === "Sport"
}).map((banner) =>
<p key={banner.Id}>{banner.Content}</p>
) : (
<div>Loading...</div>
)}
</div>
</div>
{/* Futher slides */}
<div className="navigation">
<div className="btn-navig active"></div>
<div className="btn-navig"></div>
<div className="btn-navig"></div>
</div>
</div>
)
}
export default Slider;
...下面是我从 Strapi API 返回的数据，如下所示：（其中仅填充了样本图片、标题和描述...）
[
{
"id":1,
"Title":"Musik",
"Content":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
"published_at":"2021-04-23T07:32:10.839Z",
"created_at":"2021-04-23T07:32:08.130Z",
"updated_at":"2021-04-23T07:32:10.883Z",
"Cover":[
{
"id":9,
"name":"we-love-pizza.jpg",
"alternativeText":null,
"caption":null,
"width":3782,
"height":2522,
"formats":{
"thumbnail":{
"name":"thumbnail_we-love-pizza.jpg",
"hash":"thumbnail_we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"width":234,
"height":156,
"size":13.75,
"path":null,
"url":"/uploads/thumbnail_we_love_pizza_d16dd21274.jpg"
},
"large":{
"name":"large_we-love-pizza.jpg",
"hash":"large_we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"width":1000,
"height":667,
"size":180.46,
"path":null,
"url":"/uploads/large_we_love_pizza_d16dd21274.jpg"
},
"medium":{
"name":"medium_we-love-pizza.jpg",
"hash":"medium_we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"width":750,
"height":500,
"size":106.25,
"path":null,
"url":"/uploads/medium_we_love_pizza_d16dd21274.jpg"
},
"small":{
"name":"small_we-love-pizza.jpg",
"hash":"small_we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"width":500,
"height":333,
"size":52.59,
"path":null,
"url":"/uploads/small_we_love_pizza_d16dd21274.jpg"
}
},
"hash":"we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"size":955.02,
"url":"/uploads/we_love_pizza_d16dd21274.jpg",
"previewUrl":null,
"provider":"local",
"provider_metadata":null,
"created_at":"2021-04-20T17:42:20.277Z",
"updated_at":"2021-04-20T17:42:20.277Z"
}
]
},
{
"id":2,
"Title":"Sport",
"Content":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
"published_at":"2021-04-24T11:56:58.633Z",
"created_at":"2021-04-24T11:56:56.191Z",
"updated_at":"2021-04-24T11:56:58.697Z",
"Cover":[
{
"id":8,
"name":"beautiful-picture.jpg",
"alternativeText":null,
"caption":null,
"width":3824,
"height":2548,
"formats":{
"thumbnail":{
"name":"thumbnail_beautiful-picture.jpg",
"hash":"thumbnail_beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"width":234,
"height":156,
"size":6.44,
"path":null,
"url":"/uploads/thumbnail_beautiful_picture_06a43830c6.jpg"
},
"large":{
"name":"large_beautiful-picture.jpg",
"hash":"large_beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"width":1000,
"height":666,
"size":83.56,
"path":null,
"url":"/uploads/large_beautiful_picture_06a43830c6.jpg"
},
"medium":{
"name":"medium_beautiful-picture.jpg",
"hash":"medium_beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"width":750,
"height":500,
"size":47.82,
"path":null,
"url":"/uploads/medium_beautiful_picture_06a43830c6.jpg"
},
"small":{
"name":"small_beautiful-picture.jpg",
"hash":"small_beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"width":500,
"height":333,
"size":23.36,
"path":null,
"url":"/uploads/small_beautiful_picture_06a43830c6.jpg"
}
},
"hash":"beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"size":585.12,
"url":"/uploads/beautiful_picture_06a43830c6.jpg",
"previewUrl":null,
"provider":"local",
"provider_metadata":null,
"created_at":"2021-04-20T17:42:20.163Z",
"updated_at":"2021-04-20T17:42:20.163Z"
}
]
},
{
"id":3,
"Title":"Kunst",
"Content":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
"published_at":"2021-04-24T11:57:31.725Z",
"created_at":"2021-04-24T11:57:15.225Z",
"updated_at":"2021-04-24T11:57:31.794Z",
"Cover":[
{
"id":6,
"name":"this-shrimp-is-awesome.jpg",
"alternativeText":null,
"caption":null,
"width":1200,
"height":630,
"formats":{
"thumbnail":{
"name":"thumbnail_this-shrimp-is-awesome.jpg",
"hash":"thumbnail_this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"width":245,
"height":129,
"size":9.43,
"path":null,
"url":"/uploads/thumbnail_this_shrimp_is_awesome_4167fb0adc.jpg"
},
"large":{
"name":"large_this-shrimp-is-awesome.jpg",
"hash":"large_this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"width":1000,
"height":525,
"size":72.87,
"path":null,
"url":"/uploads/large_this_shrimp_is_awesome_4167fb0adc.jpg"
},
"medium":{
"name":"medium_this-shrimp-is-awesome.jpg",
"hash":"medium_this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"width":750,
"height":394,
"size":48.38,
"path":null,
"url":"/uploads/medium_this_shrimp_is_awesome_4167fb0adc.jpg"
},
"small":{
"name":"small_this-shrimp-is-awesome.jpg",
"hash":"small_this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"width":500,
"height":263,
"size":26.69,
"path":null,
"url":"/uploads/small_this_shrimp_is_awesome_4167fb0adc.jpg"
}
},
"hash":"this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"size":95.48,
"url":"/uploads/this_shrimp_is_awesome_4167fb0adc.jpg",
"previewUrl":null,
"provider":"local",
"provider_metadata":null,
"created_at":"2021-04-20T17:42:19.639Z",
"updated_at":"2021-04-20T17:42:19.639Z"
}
]
}
]
希望有人能帮助我 - 谢谢！
我没有完全理解这个问题。我猜你是问为什么图片不显示。当 strapi returns 时，它作为路径出现，而不是作为基础 url。如果你尝试 我想问题就解决了。