顯示圖片 <img src='path' /> 在React中有一些問題

Question

我正在React中創建一個模板首頁，我需要顯示許多本地虛擬圖像 。

在我的<Main />組件內部，我導入了其他組件，這些組件將圖像路徑作為參數傳遞，如下所示：

  <Container
    type="image"
    source=...
    message=""
    link="" />

由於我已經搜索並閱讀了不同的答案，因此到目前為止，在React中我們不能僅僅使用<img src="relative image path" /> ，我不知道到底是什么問題，緩存對象/渲染對象等。

到目前為止，為了加載頁面上的圖像，我做了什么：
1.首先將它們import img1 from '../assets/img/hd1080.png'頂部： import img1 from '../assets/img/hd1080.png'
2.將圖像傳遞到組件，如下所示：

<Container
    type="image"
    source={img1}
    message=""
    link="" />

3. 在內部，我將其傳遞給img，如下所示： <img src={img1} />

只是想知道是否有更快的方法，不需要先導入圖像然后使用它們，即src="relative path"

Answer 1

在React中，您也可以使用圖像的相對路徑。

但是，考慮到您的問題，您可能需要Webpack來編譯和捆綁資產。 “ Webpack方式”更喜歡對Webpack處理的所有內容進行編譯。 這具有一些優點，例如能夠通過Webpack插件優化和內嵌圖像。

另一種方法是使用Webpack編譯JS和CSS，然后將圖像原樣復制到“已編譯的文件夾”中。

Webpack的開發服務器允許您根據需要執行此操作，有時它比讓JS文件導入圖像更容易，更有意義。

如果您的唯一目標是簡單，那么導入就更簡單-您不需要其他“文件復印機”腳本來進行文件編譯，並且Webpack可以壓縮或內聯圖像。

但是，如果導入每個圖像都變得難以管理，請考慮制定一個簡單的文件復制規則（例如，使用Makefiles），將文件復制到dist文件夾，然后簡單地編寫<Container source="/images/x.png"> 。

Answer 2

如果您要處理多個文件，那么我建議您制作一個單獨的文件並導入其所有圖像。 對於exp：

module.exports = {
    Slider_Arrow_Icon: {
       back_Arrow_Icon: require('../images/arrow-slide-back')
    }

}

然后導入此文件，您可以輕松使用。 如果有任何查詢lmk。

希望這對您有用。