<img src='img.png'>不顯示本地文件（反應）

Question

我在javascript中有一個img標簽，它沒有顯示文件（本地文件）。 該文件位於名為 images 的文件夾中，而我嘗試使用該圖像的 js 文件位於名為 Pages 的文件夾中。 兩個文件夾都在同一個目錄下。

<img src='../images/img.png' alt='template'/>

這是我使用標簽的方式，瀏覽器在無效圖像上顯示帶有圖標的替代名稱

Answer 1

當圖像在您的應用程序的public文件夾中時，您可以使用相對路徑，最好通過 webpack 傳遞圖像，這樣您只需將圖像作為普通對象導入並使用它到您的組件中。

import template from '../images/image.jpg/

// later ir your code 

<img src={template} alt="image al" />

Answer 2

您需要在反應組件中導入圖像，如下所示。

import image from '../images/img.png';

並在 img 標簽中使用，如下所示

<img src={image} />

它會起作用。

Answer 3

如果這是一個 React 項目，你需要像這樣在你的src要求圖像：

src={ require('../images/img.png') }