Javascript 通过对象数组进行映射并为重复的React组件提取imgPath

我正在尝试为一家美术馆展示图像。我有一个MainGallery组件，在该组件中有一个片段组件，为帮助文件portfolio.js中的每个对象渲染

工件组件正在为每个对象渲染，我可以访问对象中的数据，但图像路径不显示图像，即使文件路径正确

MainGallery.js

import React, { useState } from 'react';
import portfolio from '../../portfolio';
import Piece from '../Piece/Piece';

export default function MainGallery() {
  // const [pieces, setPieces] = useState(Object.keys(portfolio).map((x) => x));

  return (
    <div>
      {Object.keys(portfolio).map((key) => (
        <Piece
          key={key}
          index={key} // if we need access to key we need to pass it down as prop as something other than 'key'
          details={portfolio[key]}
        />
      ))}
    </div>
  );
}

---

尝试在src路径中使用require

<img src={require(imgPath)} alt={title} />

第三种选择是尝试导入组件中的所有图像，但这需要对代码进行更多更改

import storm from '../../images/storm.jpg'

最后一件要尝试的事情是确保将所有图像保存在公用文件夹中，而不是保存在src中。然后像这样访问它们：

<img src='/images/storm.jpg' />

---

希望能有所帮助。

将图像文件夹移动到公用文件夹而不是src完成了此操作！

export const poster1 = require('./storm.jpg');

import storm from '../../images/storm.jpg'

<img src='/images/storm.jpg' />