Using media as background image
lzinga opened this issue · comments
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>
Looks to be an issue with tailwind? When I set it using style attribute it works.