How to display local images from local json file in vue? - vue.js

Question

So I have a json file with this structure:
[
{
"id": 1,
"name": "name1",
"img": "pic1.jpg"
}
]
I am making a vue project where after I import it I'm trying to use as the img name in src for my image:
<div v-for="item in countries" :key="item.id">
<img :src="../src/assets/images/`item.img`" alt="">
</div>
But image doesn't appear, rest of the data is fine. How do I get the image?
Home.vue script
<script>
import { useDark, useToggle } from '#vueuse/core'
import jsonData from "../data/country.json"
export default {
name: "Home",
setup() {
const isDark = useDark();
const toggleDark = useToggle(isDark);
console.log(isDark.value);
return {
isDark,
toggleDark
}
},
data: function () {
return {
isSideOpen: false,
drawer: true,
isTheme: false,
listView: false,
show: false,
}
},
data() {
return {
countries: jsonData
}
},
}
</script>
Vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel({
input: [ 'resources/js/app.js'], //worls best without css
refresh: true,
}),
],
});