javascript - Pozadí obrázku v tailwindcss pomocí dynamické URL (React.js)

Mám URL obrázku získanou z API a chci ji zobrazit jako pozadí. Existuje nějaký způsob, jak to mohu implementovat s tailwindcss, nebo bych měl použít atribut styles?

Odpověď č. 1

Myslím, že jsem našel řešení kromě pouhého použití atributu stylu.

<div
  style={{'--image-url': `url(${fetchedUrl})`}} 
  className='bg-[image:var(--image-url)]'>
    <!-- ... -->
</div>

Toto funguje naprosto dobře.

Ačkoli to vypadá trochu únavně, může být použito k povolení pozadí při najetí myší, zaostření atd., což atribut style nedokáže.

className='hover:bg-[image:var(--image-url)] focus:bg-[image:var(--image-url)] ...'

Toto použití vlastních vlastností lze využít pro implementaci dynamických hodnot s Tailwindem, například barev získaných z API.

<div
  style={{'--color': fetchedColor}} 
  className='text-[color:var(--color)]'>
    <!-- ... -->
</div>

Odpověď č. 2

Myslím, že nejlepší řešení je udělat to, co jste navrhl, a použít atribut style. Tailwind CSS se opravdu nezabývá dynamickými daty, ale spíše názvy tříd, které přidávají předdefinované styly k vašemu prvku. To nejlepší, co můžete udělat bez použití atributu style, je podmíněně přidávat/odebírat classNames z prvku, ale to by vyžadovalo vědět URL obrázku dopředu, což ruší smysl získávání z API.

Udělal bych:

style={{backgroundImage: `url(${fetchedImgSrc})`}}

Úprava: Vypadá to, že ve skutečnosti můžete použít Tailwind k provedení něčeho podobného výše uvedenému kódu podle https://tailwindcss.com/docs/background-image. Kód vypadá takto:

<div class="bg-[url('/img/hero-pattern.svg')]">
  <!-- ... -->
</div>

Odpověď č. 3

můžeš prostě použít backgroundImage ve Style

const bag2 = "https://via.placeholder.com/500"

<div 
    className = "someting"
    style={{backgroundImage: `url(${bag2})`}}

</div>