在 React 中渲染图像数组答案

【问题标题】：Rendering Array of Images in React [duplicate]在 React 中渲染图像数组
【发布时间】：2020-06-15 13:12:45
【问题描述】：

我需要帮助。我一直在搜索类似的帖子，但没有一个能解决我的问题（imagesPool.js）

import React from 'react';
const imagesPool = [
  { src: './images/starbucks.png'},
  { src: './images/apple.png'},
  { src: './images/mac.png'}
];

export default imagesPool;

渲染图像（App.js）：

import React from "react";
import imagesPool from './imagesPool';

const App = () => {
   return (
     <div>
       <img src={imagesPool} />
     </div>
)};

export default App;

结果：没有显示图像

【问题讨论】：

imagesPool 是一个数组。另外，如果你只是导出一个数组，我认为你不需要导入 React？
你需要一些库来制作它，现在它只显示数组内容：路径字符串
是的@JosephD。，任何想法如何显示图像数组。我不想使用类。
@JosephD。有什么简单的方法可以将它渲染到？
@NanoMan 请看下面的答案。复制的要点是使用.map() 遍历数组。

标签： arrays reactjs image object render

【解决方案1】：

如果你渲染 jsx/tsx，你总是需要从 'react' 导入 React。在您的代码中，您返回的是 jsx，因此您需要导入 react。

    import React from 'react';
    import imagesPool from './imagesPool';

    const App = () => {
        return (
           <div>
               {imagesPool.map((image) => <img key={image.src} src={image.src} />)}  
           </div>
         )};
  export default App;

【讨论】：

谢谢，错过了一个右括号

【解决方案2】：

在 react 中，您使用 javascript 解决条件、迭代等问题（请记住，<img> 也只是 javascript 并被解析为 React.createElement("img")）。

由于img 期望src-property 中有一个字符串，我们需要遍历源数组并为每个源生成一个img-Element：

<div>
{
  imagesPool.map(({ src }) => (<img key={src} src={src} />))
}
</div>

key 告诉 react 如何识别元素与后续渲染相同。

【讨论】：

我试过了，它显示3个图像图标，但不显示真实图像。
请考虑您的 src 路径不起作用 - 这与反应无关

【解决方案3】：

您应该循环浏览您的图像，因为src 期望图像的字符串位置。

import imagesPool from './imagesPool';

const App = () => {

  return (
     <div>
       {imagesPool.map((imgSrc, index) => (<img src={imgSrc.src} key={index}/>))}
    </div>
)};

【讨论】：

它也不起作用。
那是一个错字。立即尝试。
显示3个图像图标，不显示真实图像。
这意味着您的图像 src 无效。 @约瑟夫D。是对的。将您的图片文件夹公开
之前的@JosephD。说我需要将我的图像文件夹公开，这解决了我的问题。但是他的评论消失了，我找不到他的评论。问题解决了！