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

【问题标题】：How do I dynamically import images in React?如何在 React 中动态导入图像？
【发布时间】：2020-09-23 06:50:58
【问题描述】：

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

我有一个包含 许多图像（数千张）的文件夹 - 目前它保存在 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}`)} />

知道如何让这种动态导入图像在我上面描述的场景中工作吗？我认为这篇文章对其他寻找答案的人也很有帮助。

【问题讨论】：

@Daryil 是否可以选择将图像文件夹移动到公共文件夹？

标签： javascript reactjs web webpack dynamic-import

【解决方案1】：

添加 .default 即可解决问题

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

【讨论】：

【解决方案2】：

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 上呈现（add 目录path 和require 内的extension）：

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

为什么有效？：

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

【讨论】：

谢谢。只是为了其他稍后也会阅读此内容的人的利益：所以这个表达式不起作用但是这个有效吗？
@Daryll 是的，正如我详细解释的 - stackoverflow.com/a/62095265/2873538，要使动态 require 工作，简单来说，我们需要提供 一个表达式 webpack 可以破坏 /了解目录（如果文件扩展名也更好）。在此答案中添加了 TLDR。

【解决方案3】：

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

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

那么您的map 函数将如下所示：

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

【讨论】：

谢谢伙计！拯救了我的一天。在这个元素上工作了将近 1 小时

【解决方案4】：

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

如果您使用“创建反应应用程序”，在require 之后添加.default 可以正常工作，它会从本地图像文件夹动态设置所有图像。

【讨论】：