Dynamic background images not loading

user_11720384 0
Viewed 453

I'm using Vue 3 along with Tailwind and in my template I display a list of background images, so I'm looping through an array of images and this div is responsible for showing them:

<div :class="`h-full bg-[url('@/assets/img/${article.preview_image}')] bg-center bg-no-repeat bg-cover hover:scale-105 transition duration-[2000ms] ease-in-out`" />

This way it doesn't work although I have no errors in the console and when I check the DOM it's rendered alright, the images just don't show up

The weird part is that when I hard code the name of the image like bg-[url('@/assets/img/my_image.jpg')] it works, and when I go back to using my loop variable it still works although it was not working at first, and it's not cache related because I disabled it

And then when I restart the server the images are gone again

Any idea what's causing this?

By the way, the data comes from a data.json file, if it matters. Like:

[
  { preview_image: 'xxx.jpg'},
  { preview_image: 'xxx.jpg'}
  { preview_image: 'xxx.jpg'}
]

I tried to use a .ts file instead but the problem remains

vuejs3 tailwind-css vue.js
1 Answers

This may be a webpack issue where your image files are not bundled correctly. I se you have tried a .ts file. Can you try again but use require("filePath"), with the image files. This ensures that the files are bundled.

Cheers :)

user_133127920
Related