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

Posted 2023-03-21

【中文标题】如何在 React 中动态导入图像？

【英文标题】：How do I dynamically import images in 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 是否可以选择将图像文件夹移动到公共文件夹？

【参考方案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 是的，正如我详细解释的 - ***.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 可以正常工作，它会从本地图像文件夹动态设置所有图像。