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

Question

我想显示特定产品的图像。我正在获取产品的图像，图像路径在控制台中正确打印，但图像未显示在页面中。 还有其他方法吗？ 产品图片.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>
  )
}

Answer 1

src={image}

src

需要是一个url，目前你正在传递它看起来像一个对象

image

尝试只记录

image

以查看保存 url 的键，然后您可以设置它。例如，如果图像的 url 在

image.src

:

src={image.src}

BTW

data.map

是错误的使用方法 - 如果您只想循环访问数据，请使用

data.forEach