我目前正在开发一个网站，使用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;... undernath是我从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"
}
]
}
]我希望有人能帮助我-谢谢！
2条答案
按热度按时间zzlelutf1#
我不完全理解这个问题。我猜你是在问为什么照片不显示。当strapi返回时，它是以路径的形式出现，而不是以基url的形式出现。如果你尝试<img src={http：//localhost：1337/+ url} />，我想问题会得到解决。
xggvc2p62#
默认情况下，REST API不填充任何关系、媒体字段、组件或动态区域。使用populate参数填充特定字段，使用select参数仅返回特定字段和查询结果。（参考（https://docs.strapi.io/dev-docs/api/rest/populate-select））
所以将您URL更改为
http：//localhost：1337/banners？populate=*