React 應用程式中本地圖片無法載入
開發 React 應用程式時,使用者可能會遇到本地儲存的圖片拒絕顯示的問題。儘管成功渲染了外部託管的圖像(例如 placehold.it/200x200),但本地圖像仍然難以捉摸。要解決此問題,必須深入研究伺服器配置。
檢查應用程式程式碼
為 App.js、index.js 和伺服器提供的程式碼。 Node.js 看起來很標準,沒有任何明顯的異常。然而,調查App.js 中的影像來源揭示了問題的根源:
<img src={"/images/resto.png"} />
Webpack 解析度
使用Webpack 時,使用者定義的影像必須明確要求工具處理它們。目前的使用方式需要Webpack定位到「/images」目錄下的圖片並顯示。如果沒有此步驟,Webpack 會忽略本機映像,導致應用程式中缺少它們。
所需的修改
要修正此問題,請將目前影像來源替換為以下語法:
<img src={require('/images/resto.png')} />
透過要求影像, Webpack 現在可以處理App.js 中的原始來源並將其替換為正確的來源映像,使本機映像能夠如預期顯示。
以上是為什麼我的本機圖像沒有載入到我的 React 應用程式中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!