如何在反應前端顯示來自strapi的圖像？
[英]How to display image from strapi in react frontend?
問題描述
我目前正在使用 Strapi 作為 CMS 和 Next.js (React) 在前端的網站上工作。 該網站還有一張圖片 slider，其中顯然包含圖片、標題和描述。 我已經創建了一個 function 來獲取標題和描述，但不知何故這不適用於圖像。
那么我必須更改哪些內容才能在我的網頁中顯示媒體？ 當前代碼如下所示：（文件：/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"
}
]
}
]
我希望有人能夠幫助我-謝謝！
1 個解決方案
解決方案1
0 已采納 2021-05-14 22:47:24
我不完全理解這個問題。 我猜你在問為什么圖片沒有顯示。 當 strapi 返回時，它作為路徑出現，而不是作為基礎 url。 如果您嘗試 <img src={http://localhost:1337/ + url} /> 我想問題將得到解決。
如何從快速后端服務器獲取圖像並將其顯示到 React js 前端？
[英]How to Fetch and Display an Image from an express backend server to a React js frontend?
如何從快速后端服務器獲取圖像並將其顯示到 React Native 前端？
[英]How to Fetch and Display an Image from an express backend server to a React Native frontend?
如何將圖像從 flask 服務器發送到前端的 javascript 顯示？
[英]How to send an image from flask server to javascript display on frontend?
從 Strapi CMS 獲取數據到 Next(React.js) 前端不起作用
[英]Fetch Data from Strapi CMS to Next(React.js) Frontend doesn't work
如何在React.js前端應用程序中顯示來自Rails 5 API的數據？
[英]How to display data from Rails 5 API in React.js frontend app?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
從 Django 數據庫顯示圖像到 React JS 前端
如何從快速后端服務器獲取圖像並將其顯示到 React js 前端？
如何從快速后端服務器獲取圖像並將其顯示到 React Native 前端？
如何將圖像從 flask 服務器發送到前端的 javascript 顯示？
從 Strapi CMS 獲取數據到 Next(React.js) 前端不起作用
使用 Strapi 顯示用戶信息並做出反應
如何在本機反應中顯示來自變量的圖像
如何在反應中顯示圖像數組中的圖像
如何在PostgreSQL中顯示圖像
如何在React.js前端應用程序中顯示來自Rails 5 API的數據？
相關標簽