首頁 > web前端 > js教程 > 主體

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

Linda Hamilton
發布: 2024-11-17 15:47:02
原創
900 人瀏覽過

Why are my local images not loading in my React application?

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板