為什麼我的本機圖像沒有載入到我的 React 應用程式中？

React 應用程式中本地圖片無法載入

開發 React 應用程式時，使用者可能會遇到本地儲存的圖片拒絕顯示的問題。儘管成功渲染了外部託管的圖像（例如 placehold.it/200x200），但本地圖像仍然難以捉摸。要解決此問題，必須深入研究伺服器配置。

檢查應用程式程式碼

為 App.js、index.js 和伺服器提供的程式碼。 Node.js 看起來很標準，沒有任何明顯的異常。然而，調查App.js 中的影像來源揭示了問題的根源：

<img  src="%7B%22/images/resto.png%22%7D" alt="為什麼我的本機圖像沒有載入到我的 React 應用程式中？" >

Webpack 解析度

使用Webpack 時，使用者定義的影像必須明確要求工具處理它們。目前的使用方式需要Webpack定位到「/images」目錄下的圖片並顯示。如果沒有此步驟，Webpack 會忽略本機映像，導致應用程式中缺少它們。

所需的修改

要修正此問題，請將目前影像來源替換為以下語法：

<img  src="%7Brequire('/images/resto.png')%7D" alt="為什麼我的本機圖像沒有載入到我的 React 應用程式中？" >

透過要求影像， Webpack 現在可以處理App.js 中的原始來源並將其替換為正確的來源映像，使本機映像能夠如預期顯示。

以上是為什麼我的本機圖像沒有載入到我的 React 應用程式中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！