您需要确保将imgs数组转换为包含JSX标记的另一个数组。从那里，您需要迭代React的标记数组以呈现displayImg数组的每个索引。

const Component = () => {

    const imgs = [
        './../imgs/book1.jpg',
        './../imgs/book2.jpg',
        './../imgs/book3.jpg',
    ];

    const displayImg = imgs.map(img => {
        return (
            <figure>
            <img src={img} alt='book' />
            </figure>**strong text**
        )
    });

    return displayImg.map(img => img);

}

数组的forEach（）函数返回undefined。
如果你想同时显示多个图像，选择返回组件数组的函数：map()

const displayImgs = imgBooks.map(img => {

如果你的组件只包含数组的组件，那么你可以简单地返回数组：

const imgBooks = [
  './../imgs/book1.jpg',
  './../imgs/book2.jpg',
  './../imgs/book3.jpg',
]
return imgBooks.map(img => (<figure><img src={img} alt='book' /></figure>));

注意数组的名称：imgBooks。有imgs vs imgBooks错字（？）的问题。

如果你使用的是create-react-app，你的所有资产都是捆绑在一起的，它们有不同的名字。所以，动态导入就不行了。为了克服这一点，你添加所有的图像在公共文件夹，然后

{ imgs.map((img) => (
   <figure>
      <img src={process.env.PUBLIC_URL + `/${data.photo}`}/>
   </figure>
))

这对我很有效：

{productId && images.length > 0
                ? images.map((x, index) => (
                      <img
                        src={`${backend_url}${x}`}
                        key={index}
                        alt=""
                        className="h-[120px] w-[120px] object-cover m-2"
                      />
                  ))
                 :null 
                  ))}