how to add correctly an image in vuejs - vue.js

Question

I want to have the image be shown in my project; however, I wasn't able to work it out.
I did search for a solution, and I tried it but it didn't work out for me.
What could be the solution here? Thank you in advance for your help.
Here is the html part:
<template>
<div id="app">
<div class="productListing">
<div class="box effect1" :key="product.id" v-for="product in ProductFilter.slice(0,3)">
<h1>{{product.title}}</h1>
<img :src="product.img" alt="dd">
</div>
</div>
</div>
</template>
vue js part
<script>
export default {
data: function () {
return {
userFilterKey: 'all',
products:[
{
id: 1,
title: "Google Pixel - Black",
price: 10,
company: "GOOGLE",
status : "TopSell",
img: "../../bg.jpeg"
}
],
}
},
computed: {
ProductFilter() {
return this[this.userFilterKey]
},
all() {
return this.products
},
TopSell() {
return this.products.filter((product) => product.status === "TopSell")
},
highRated() {
return this.products.filter((product) => product.status === "HighRated")
},
}
}
// # is an alias to /src
</script>
Thanks again in advance for your help.

Answer 1

Assuming the image path you provided is correct, use the require function instead.
products: [
{
id: 1,
title: "Google Pixel - Black",
price: 10,
company: "GOOGLE",
status : "TopSell",
img: require("../../bg.jpeg")
}
],