I'm trying to link a background image from an external source using Vue.js. This is the code snippet:
<div class="image-box border"
:style="{ background: `url(`+ item.image +`) no-repeat center` }"
style="width: 220px; height: 220px">
I also attempted this method:
<div class="image-box border"
:style="{ 'backgroundImage': 'url(' + item.image + ')' }">
Here is how the URL appears in the app with no errors:
background-image: url("http://localhost:8080/assets/images/shoe-1.png");
Any assistance would be greatly appreciated!
Full code:
component -
<template>
<div class="product-card-box border">
<div class="image-box border"
:style="{ background: `url(`+ item.image +`) no-repeat center` }"
style="width: 220px; height: 220px">
</div>
<div class="info-box border">
<div class="color-info product-info bold">{{item.colors.length}} color</div>
<div class="product-name">
<div class="product-info bold">{{item.name}}</div>
<div class="product-info sub-info">{{item.gender}}'s Shoe</div>
</div>
<div class="product-price">
<div class="product-info sub-info">${{item.price}}</div>
</div>
</div>
</div>
</template>
data -
const data = [
{
name: 'SNKR 001',
gender: 'Men',
price: 100,
sport: 'running',
width: 'Wide',
colors: ['black', 'white', 'green', 'pink'],
sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
image: '../assets/images/shoe-1.png'
},
{
name: 'SNKR 002',
gender: 'Men',
price: 100,
sport: 'running',
width: 'Wide',
colors: ['black', 'white', 'green', 'pink'],
sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
image: '../assets/images/shoe-1.png'
}
];
export default data;