如何在 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))} />
      })}
    </>
  )
}

根據我在網上閱讀的內容，這與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

添加.default 可以解決問題

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

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

---

您可以使用表達式動態要求。

文件名：

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

並在 UI 上呈現（在require中添加目錄路徑和擴展名）：

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

為什么有效？：

Webpack 可以理解這個表達式，通過生成關於目錄和擴展的上下文，並且可以加載所有匹配的模塊。

Answer 3

更新您的getImagePath function 以返回一個img元素。

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

然后您的map function 將如下所示：

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

Answer 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可以正常工作，它會從本地圖像文件夾動態設置所有圖像。

Answer 5

在 RN 中動態導入圖像的最佳方法是將圖像放在名為 drawable 的文件夾中，該文件夾位於 app/src/main/res 中。

您不能將子目錄放在此文件夾中，只需將圖像粘貼到那里即可。 然后，在您的圖像組件中執行以下操作：

source={{uri: 'name-of-your-file-without-extension'}}

記住，沒有擴展名。

此名稱可以是動態的，例如，您可以使用保存在每個項目中的文件的名稱，它會起作用，而無需使用硬編碼導入做一個有趣的文件。