在使用 Create React App 更改背景影像時遇到問題，我通過 props 提供給我的組件。檔案說使用匯入語法。這有效，但這意味著我必須將每個背景影像硬編碼到每個組件。無論如何要動態地做到這一點？
我注意到它也不允許我在匯入語法上使用模板文字。我認為這將解決我的問題。
import '../css/Avatar.css';
import photo from "../images/joe_exotic.jpg";
const Avatar = (props) => {
return (
<div
style={{backgroundImage: `url("${photo}")`}}
className="avatar">
</div>
)
}
export default Avatar;
PS 我查看了有關此堆疊溢位的其他文章，但它們沒有提供太多幫助。
謝謝
uj5u.com熱心網友回復：
如果你想避免這種方式，你可以把你的圖片放在public你的React應用程式的檔案夾中，然后像這樣抓取它們：
import '../css/Avatar.css';
const Avatar = (props) => {
return (
<div
style={{backgroundImage: `url("/joe_exotic.jpg")`}}
className="avatar">
</div>
)
}
export default Avatar;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/370881.html
上一篇：反應路線如何到達我想要的頁面