我的 api 正在獲取影像，但我似乎無法將其顯示到 ReactJs 中。
api：
[
{
"id": 1,
"vessel_component_count": 3,
"vessel_inventory_category_count": 0,
"name": "Aylah",
"imo": "Aylah123",
"image": "/media/vessel_image/aylah.jpg"
},
{
"id": 2,
"vessel_component_count": 1,
"vessel_inventory_category_count": 0,
"name": "Sinaa",
"imo": "sinaa123",
"image": null
},
{
"id": 3,
"vessel_component_count": 0,
"vessel_inventory_category_count": 0,
"name": "Amman",
"imo": "amman123",
"image": "/media/vessel_image/amman.jpg"
}
]
反應中的代碼
父組件 Homescreen.js ：
function HomeScreen() {
const [vessels, setVessels] = useState([]);
useEffect(() => {
async function fetchVessels() {
const { data } = await axios.get(
"http://127.0.0.1:8000/api/vessels/info"
);
setVessels(data);
}
fetchVessels();
}, []);
return (
<div>
Fleet vessels :
<div className="fleet-vessels-info">
{vessels.map((vessel) => (
<VesselCard vessel={vessel} />
))}
</div>
</div>
);
}
export default HomeScreen;
子組件 VesselCard.js ：
function VesselCard({ vessel }) {
return (
<div className="fleet-vessel-card">
{vessel.name}
<img src={vessel.image} />
</div>
);
}
export default VesselCard;
除了影像之外，獲取名稱和 imo 之類的其他所有內容都可以正常作業。
uj5u.com熱心網友回復：
看起來，由于影像路徑是由您的后端相對回傳的，因此您正嘗試從前端服務器獲取它們。
例如。如果您的后端是“backend.com”，而您的前端是“frontend.com”（即運行 localhost/react 應用程式服務器的位置），
然后它正在搜索'frontend.com/media/vessel_image/amman.jpg'它看起來應該搜索的時間'backend.com/media/vessel_image/amman.jpg'
如果您檢查Dev tools > Network tab并發現它無法找到影像，則可以看到這一點。
uj5u.com熱心網友回復：
您提供的影像路徑是相對的。提供影像的絕對路徑或將這些影像存盤在公用檔案夾中。public > media > vessel_image
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/475653.html
標籤：javascript 反应