我有一個從 API 獲取的影像 url，我想將其顯示為背景影像。有什么方法可以用 tailwindcss 實作它還是應該使用樣式屬性？
uj5u.com熱心網友回復：
我認為最好的解決方案是按照您的建議進行操作并使用樣式屬性。Tailwind CSS 并不真正處理動態資料，而是使用類名來為您的元素添加預定義的樣式。如果不使用 style 屬性，最好的辦法是有條件地從元素中添加/洗掉類名，但這需要您提前知道影像 URL，這違背了從 API 獲取它的目的。
我會做：
style={{backgroundImage: `url(${fetchedImgSrc})`}}
編輯：看起來您實際上可以根據https://tailwindcss.com/docs/background-image使用 Tailwind 來執行與上述代碼類似的操作。代碼如下所示：
<div class="bg-[url('/img/hero-pattern.svg')]">
<!-- ... -->
</div>
uj5u.com熱心網友回復：
Tailwind 檔案：https ://tailwindcss.com/docs/background-image#arbitrary-values
你可以試試下面的東西
來自檔案示例 (HTML)
<div class="bg-[url('/img/hero-pattern.svg')]">
<!-- ... -->
</div>
在 JSX 中會是這樣的（我可能語法錯誤。）
<div className=`bg-[url('{DYNAMIC_IMG_PATH}')]`>
<!-- ... -->
</div>
uj5u.com熱心網友回復：
我想我已經找到了一個解決方案，而不是簡單地使用樣式屬性。
<div
style={{'var(--image-url)': fetchedUrl}}
className='bg-[image:var(--image-url)]'>
<!-- ... -->
</div>
這作業得很好。
雖然看起來有點繁瑣，但是可以用來實作背景圖片的hover、focus等，其中style屬性是無法實作的。
className='hover:bg-[image:var(--image-url)] focus:bg-[image:var(--image-url)] ...'
這種自定義屬性的應用程式可用于實作動態值，例如從 API 獲取的順風顏色。
<div
style={{'var(--color)': fetchedColor}}
className='text-[color:var(--color)]'>
<!-- ... -->
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/418609.html
標籤：
下一篇：Divs間距與邊距不均勻