我无法在 React 的 img 标签的 src 属性中使用数组元素

Question

我的目标是渲染多个图像，我已经在一个名为图像的数组中定义了它们的路径。 但是当我想在 img 标签的 src 属性中使用它时，由于某种原因它不会呈现图像，即使路径是正确的。

我在反应组件中编写的代码如下：

let images=["../../../assets/temp.jpg", "../../../assets/temp2.jpg", "../../../assets/temp3.jpg"];
let n = images.length;
let imgArray = [];

for (let i = 0; i < n; i++) {
    imgArray.push(<img src={images[i]} alt="image cover" />);
}
return(
    <div>
        {imgArray}
    </div>
);

上面的代码不会渲染作为 src 中的路径提供的图像。 但是，如果我导入路径，然后将该导入的元素提供为 src，那么它就可以正常工作。

我在项目中使用的技术是 React.js 和 Bootstrap

Answer 1

React 使用无法显示 arrays 的 JSX。在您的代码中， {imgArray}是一个图像数组，您现在需要对其进行循环并转换为 JSX 组件/元素。

最好的方法是使用array.map function 内置于 JS arrays。

// use "const" not let if the var doesn't change
const imgArray = [
    {
        key: 'uniqueid1',
        src: 'path/to/img.png',
    },
];

return
   ​<div>
       ​{
            imgArray.map(_img => <img 
                src={_img.src} 
                key={_img.key}
                alt="image cover" 
            />)
        }
  ​</div>
);

您会注意到我们现在也不需要 for 循环。

PS：不要忘记“关键”，这对 React 协调您创建的图像元素非常重要（也不要使用数组索引）

更多信息：

• 列表和键