在 React 中渲染图像数组

Question

我需要帮助。我一直在搜索类似的帖子，但其中 none 解决了我的问题 (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;

结果：没有显示图像

Answer 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;

Answer 2

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

由于 img 需要 src-属性中的字符串，我们需要遍历源数组并为每个源生成一个 img-Element :

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

使用 key 你告诉 React 如何识别一个元素与后续渲染相同。

Answer 3

您应该遍历图像，因为 src 需要图像的字符串位置。

import imagesPool from './imagesPool';

const App = () => {

  return (
     <div>
       {imagesPool.map((imgSrc, index) => (<img src={imgSrc.src} key={index} alt="Make sure to include a alt tag, because react might throw an error at build"/>))}
    </div>
)};

在 React 中渲染图像数组

Rendering Array of Images in React

arrays

image

render

object

reactjs