影像存盤在 client/public/images 檔案夾中。并且檔案名和擴展名是從 mysql 資料庫中獲取的。如何撰寫 img 元素的 src 屬性來顯示影像。
<img src={`%PUBLIC_URL%/images/${portraitFile}`} alt='' />
這是行不通的
我的專案結構：
- public
-images
- portrait.jpg
- src
- components
- image viewer component
- App.js
uj5u.com熱心網友回復：
如果你的專案結構是這樣的：
- public
- images
- portrait.png
- src
...
- components
...
App.js
你把你的影像標簽放在 App.js 中，你可以像這樣獲取影像：
<img src={`../images/portrait.png}`} alt='' />
如果將影像放在 src 目錄中：
- src
- assets
- images
- portrait.png
- components
...
App.js
在應用程式中，您可以像這樣匯入：
import Logo from "./assets/images/logo192.png";
并使用匯入的 Logo 進行渲染：
<img src={Logo} alt="" />
uj5u.com熱心網友回復：
根據 CRA 應用程式，您使用了錯誤的語法。使用以下內容：
<img src={require("../images/${portraitFile}").default} alt="" />
提供影像檔案夾的路徑。
如果影像在公共檔案夾中。你可以寫：
<img src={`../images/${portraitFile}`} alt='Portrait' />
請注意反引號，因為您使用的是模板文字語法。
uj5u.com熱心網友回復：
伙計們，我得到了它。它應該是：
<img src={`/images/${portraitFile}`} alt='Portrait' width='70%'/>
由于每個組件都在檔案中呈現index.html，我應該根據index.html檔案制作 src 結構。就是這樣
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/495099.html