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))} />
      })}
    </>
  )
}

根据我在网上阅读的内容，这与 webpack 的工作方式有关，并且只有在将确切的字符串路径输入到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

TLDR;

// All of these works

const fileNameExt = 'foo.jpg'
<img src={require('../images/' + fileNameExt)} />
<img src={require(`../images/${fileNameExt}`)} />

const fileName = 'foo'
<img src={require('../images/' + fileName + '.jpg')} />
<img src={require(`../images/${fileName}.jpg`)} />

// These does not work:

const myPathVariable1 = '../images/' + 'foo' + '.jpg'
<img src={require(myPathVariable1)} />

const myPathVariable2 = '../images/' + 'foo.jpg'
<img src={require(myPathVariable2)} />

您可以require dynamically with expression。

文件名：

const imageList = ["img1", "img2", "img3", ... ]

并渲染到UI（require内的添加目录路径和扩展名）：

{
  imageList.map(img => {
    return <img src={require("../assets/images/" + img + ".jpg")} />
  })
}

为什么起作用？：

Webpack可以通过generating context about directory and extension理解此表达式，并可以加载所有匹配的模块。

Answer 2

更新您的getImagePath函数以返回img元素。

const getImage = (image) => {
   return <img src={require(`../assets/images/${image}.jpg`)} />
}

然后您的map函数将如下所示：

imageList.map((img) => {
   return getImage(img);
});

Answer 3

  // 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)).default} />
      })}
    </>
  )
}

如果您使用的是“ create react app”，则在.default之后添加require效果很好，它将动态设置本地图像文件夹中的所有图像。

Answer 4

添加.default可以解决问题

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

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

4 个答案: