javascript - 如何在 React 中动态导入图像？

Question

在网上看到了几个答案，但没有明确的解释，解决方案也不起作用。所以这就是我想要做的:

我有一个文件夹 许多图片 (千) - 目前保存在 src/assets/images 下文件夹

例如，给定一个图像列表作为输入，我想 动态渲染这些图像 .并且不要全部导入，因为考虑到疯狂数量的图像

，这是不可能的

这是我目前的实现方式( 不起作用 ):

// for example
const imageList = ['img1', 'img2', 'img3' /*...so on */]

const getImagePath = (image) => {
  return `../assets/images/${image}.jpg`
}

function ImagesPage() {
  return (
    <>
      <p>Below should show a list of images</p>
      {imageList.map((img) => {
        return <img src={require(getImagePath(img))} />
      })}
    </>
  )
}

根据我在网上看到的，这与 的方式有关。网页包有效，并且仅当将确切的字符串路径输入到 require 时才有效:

// This works:
<img src={require('../assets/images/img1.jpg')} />

// But all these will not work:
<img src={require(getImagePath(img))} />

const img = 'img1.jpg'
<img src={require(`../assets/images/${img}`)} />

知道我怎么能得到这个 图片动态导入在我上面描述的场景中工作？我认为这篇文章对其他寻找答案的人也很有帮助。

Answer 1

添加 .default 就可以了

<img src={require(`../../folder-path/${dynamic-filename}.png`).default} />