在reactjs中显示从rest API获取的图像

yhuiod9q  于 2023-04-11  发布在  React
关注(0)|答案(3)|浏览(143)

我想显示特定产品的图像。我正在获取产品的图像,并且图像路径在控制台中正确打印,但图像没有显示在页面中。是否有其他方法可以实现?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>
  )
}
ecbunoof

ecbunoof1#

{images.map((image) => {
   return <img key={image.id} src={image.image} alt="some-image" />
})}

基于你的形象对象,我认为这是正确的做法

ui7jx7zq

ui7jx7zq2#

src={image}

src需要是一个url,目前你正在传递一个看起来像image的对象
尝试只记录image来查看保存url的键,然后您可以设置它。例如,如果图像的路径在image.image中:

src={image.image}

顺便说一句,data.map是错误的方法-如果您只想循环数据,请使用data.forEach

nhaq1z21

nhaq1z213#

尝试:

src={`${URL.createObjectURL(image?.image)}`}

或者,

src={`${rootUrl}${image?.image}`}

在这里,rootUrl看起来像“192.168.31.183:8000”

相关问题