search

davestewart / nuxt-content-assets

Enable locally-located assets in Nuxt Content
https://npmjs.com/package/nuxt-content-assets
108 stars 7 forks source link

Using media as background image #68

Closed lzinga closed 2 months ago

lzinga commented 2 months ago

Background

I have images loading and things like <img :src="doc.thumbnail" /> work great. However with certain css I am trying to set the background to an image like

:class="'w-full object-cover h-96 sm:h-[480px] bg-[url(\'' + doc.thumbnail + '\')] bg-no-repeat bg-center bg-cover rounded-xl'">

Issue

The image ends up being blank even though the image exists.

Here is the full div when viewing source.

<div class="w-full object-cover h-96 sm:h-[480px] bg-[url('/images/business.jpg')] bg-no-repeat bg-center bg-cover rounded-xl"></div>

and here is the div from inside the code

<div :class="'w-full object-cover h-96 sm:h-[480px] bg-[url(\'' + doc.thumbnail + '\')] bg-no-repeat bg-center bg-cover rounded-xl'">
</div>
lzinga commented 2 months ago

Looks to be an issue with tailwind? When I set it using style attribute it works.