我想显示特定产品的图像。我正在获取产品的图像,并且图像路径在控制台中正确打印,但图像没有显示在页面中。是否有其他方法可以实现?ProductImage.jsx
import axios from 'axios';
import React, { useEffect, useState } from 'react'
export default function ProductImage({product_id}) {
const [images, setImages] = useState([]);
useEffect(() => {
(async () => {
const {data} = await axios.get(`products/${product_id}/images`);
setImages(data);
data.map((image) => {
console.log(image.image);
})
})();
}, []);
return (
<div>
{images.map((image) => {
return <img key={image.id} src={image} alt="some-image" />
})}
</div>
)
}
3条答案
按热度按时间ecbunoof1#
基于你的形象对象,我认为这是正确的做法
ui7jx7zq2#
src
需要是一个url,目前你正在传递一个看起来像image
的对象尝试只记录
image
来查看保存url的键,然后您可以设置它。例如,如果图像的路径在image.image
中:顺便说一句,
data.map
是错误的方法-如果您只想循环数据,请使用data.forEach
nhaq1z213#
尝试:
或者,
在这里,rootUrl看起来像“192.168.31.183:8000”