我正在嘗試從 components 檔案夾內的 'home.js' 檔案中的 'images' 檔案夾匯入影像。我嘗試了許多“../”和“./”的組合，但頁面上沒有加載影像。路徑可能有問題。
uj5u.com熱心網友回復：
由于您使用的是 React，您是否檢查過組件是否甚至被渲染到視圖中？其他因素可能是您應用的課程“ home-wrapper”或“ backImg”
我通常添加一些占位符文本來檢查它是否彈出。
關于 Omars 的回答，沒錯，您只需要回傳兩個目錄即可訪問該影像，就像這樣
<img src="../../images/astronaut.png" alt="astronaut"/>
uj5u.com熱心網友回復：
當您提供相對 URL 時，它必須從 HTML 的 URL 轉到影像的 URL。
您正在嘗試從 JavaScript 檔案的檔案路徑轉到影像的檔案路徑。
由于該影像不在公共目錄中，因此該影像很可能一開始就沒有 URL。
您可以使用兩種基本方法來確定此處的 URL。
手動
您需要將影像放在具有 URL 的位置。
如何執行此操作將取決于您使用的 HTTP 服務器。您需要確保影像在您的開發和生產環境中具有相同的 URL（或至少一個相對于 HTML 檔案的 URL）。
例如，您可以將它放在公共目錄中，然后說src="public/images/yourimage.jpeg". （請注意，我在這里假設您的開發服務器如何將 URL 分配給公共目錄中的檔案）。
使用你的捆綁器
通常在使用 React 時（就像您正在做的那樣），您將使用 Webpack 之類的工具來生成站點的生產就緒版本。這將執行諸如洗掉慢速除錯例程、搖樹以從未使用的模塊中洗掉代碼等操作。
Webpack 具有處理影像的功能，因此一旦您設定了組態檔以支持它，您就可以執行以下操作：
import MyImage from '../../../images/yourimage.jpeg';
和
<img src={MyImage} alt="etc etc" />
請注意，此處的路徑是相對于 JS 檔案的，您需要使用該路徑{}將變數的值分配給src.
uj5u.com熱心網友回復：
反應中的正確語法是：
import astronaut from '../images/astronaut.png';
<img src={astronaut} alt="無法在 js 檔案中指定影像路徑" />
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/438241.html