Vue bind url not functioning properly with image src - vue.js

Question

<template>
<div id="app">
<b-container >
<b-row>
<div class="product">
<img src='./assets/SocksG.jpg' alt="">
</div>
<div class="cart">
<button #click="addToCart">Add To Cart</button>
<br>
<p>Cart({{cart}})</p>
</div>
<div v-for="variant in variants"
:key="variant.variantId"
class="color-box"
:style="{backgroundColor:variant.variantColor}"
#mouseover ="updateProduct(variant.variantImage)"
>
</div>
</b-row>
</b-container>
</div>
</template>
export default {
name: 'App',
data() {
return {
cart: 0,
variants: [{
variantId: 2234,
variantColor: 'green',
variantImage: './assets/SocksG.jpg'
}, {
variantId: 2235,
variantColor: 'blue',
variantImage: './assets/SocksB.jpg'
}]
}
},
methods: {
addToCart() {
this.cart += 1
},
updateProduct(variantImage) {
this.image = variantImage
}
}
}
At first I applied :src to the socksG image and in the script I had to use img:require("./assets/SocksG.jpg" and it worked.
Now with the #mouseover event handler that's supposed to activate the updateProduct() function, I get the feeling that I'm doing something wrong with the Vue url handler that should fetch the variantImage(s) because when I use the Vue devtools the image url is img/SocksG.jpg and not ./assets/SocksG.jpg. What am I doing wrong?

Answer 1

Add a data property for image:
return {
image: ..., // Set some initial image filename here
cart: 0,
...
}
Use require like this:
<img :src="require('#/assets/' + this.image)" alt="">
and remove the paths from the urls:
variantImage: 'SocksG.jpg'
...
variantImage: 'SocksB.jpg'
Now the image src is bound to this.image, which you are changing with the mouseover.