我在 react.js 中有一個 Hero 組件：
if(item.fields!=undefined)
{
var img1=item.fields.images[0].fields.file.url
return (
<Hero hero="roomshero" style={{backgroundImage:`${img1}`}}>
<Banner className="banner" title={`${item.fields.name}`} subtitle="none">
<Link to="/rooms" className="btn-primary">Back to Rooms</Link>
</Banner>
</Hero>
)}
我正在匹配用戶單擊的專案，并在搜索我的 data.js 檔案后，設定適當的專案。每個專案都有一個獨特的影像，因此必須動態呈現。但這在我的情況下不起作用。
uj5u.com熱心網友回復：
您必須在給定的 img1 url 前面添加 url 。例子 ：
if(item.fields!=undefined)
{
var img1=item.fields.images[0].fields.file.url
return (
<Hero hero="roomshero" style={{backgroundImage:`url(${img1})`}}>
<Banner className="banner" title={`${item.fields.name}`} subtitle="none">
<Link to="/rooms" className="btn-primary">Back to Rooms</Link>
</Banner>
</Hero>
)}
另外不要忘記將寬度和高度屬性設定為橫幅標簽以查看影像。
uj5u.com熱心網友回復：
您必須在那里使用 url() CSS 函式。
<Hero hero="roomshero" style={{backgroundImage:`url(${img1})`}}>
...
</Hero>
希望這會有所幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/475649.html
標籤：javascript css 反应 背景 内联样式
下一篇：在表之間傳輸變數