In my code, I am trying to pass an object that contains a string path for its background image. I have experimented with using data and computed properties, but so far I haven't had any luck getting them to work within the :style binding. However, if I use it as a Vue variable in text, it works fine.
I have attempted different approaches using both data and computed property
The following code snippet is successful:
<div
:style="{ backgroundImage: 'url(' + require('@/assets/images/cards/pic.jpg') + ')' }"
But when I try to achieve the same result with data
<div :style="{ backgroundImage: 'url(' + require(imadata) + ')' }">
data() {
return {
imadata: "@/assets/images/cards/" + this.cardItem.image
};}
Or with computed property
<div :style="{ backgroundImage: 'url(' + require(ima) + ')' }">
computed: {
ima() {
return "@/assets/images/cards/".concat(this.cardItem.image);
}}
I encountered an error when using the computed property: [Vue warn]: Error in render: "Error: Cannot find module '@/assets/images/cards/queryfox.jpg'"
My goal is to be able to dynamically set a variable as the source of a background image in the style binding.