在 React 中渲染图像数组

Question

我需要帮助。我一直在搜索类似的帖子，但没有一个解决我的问题（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

您应该循环遍历图像，因为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>
)};