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

lpwwtiir 于 2022-11-22 发布在 React

关注(0)|答案(4)|浏览(189)

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

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

有什么想法，我可以让这个动态导入图像工作在我上面描述的情况下？我认为这篇文章将是相当有帮助的其他搜索答案了。

reactjs

来源：https://stackoverflow.com/questions/62192049/how-do-i-dynamically-import-images-in-react

4条答案

按热度按时间

cetgtptt1#

添加.default就可以了

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

2022年11月更新

升级到Webpack 5后，您将不再需要附加.default。事实上，恰恰相反。如果保留它，则不会显示任何图像，因为没有向图像添加src属性。

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

赞(0）回复(0）举报 2022-11-22

7uhlpewt2#

顶级域名注册权;

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

您可以要求动态地使用表达式。

文件名称：

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，并且可以加载所有匹配的模块。

赞(0）回复(0）举报 2022-11-22

63lcw9qa3#

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

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

那么你的map函数看起来就像这样：

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

赞(0）回复(0）举报 2022-11-22

8oomwypt4#

// 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”，在require之后添加.default可以正常工作，它会从本Map像文件夹动态设置所有图像。

赞(0）回复(0）举报 2022-11-22

我来回答

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

4条答案

2022年11月更新

相关问题

热门标签

最新问答