3

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,
        }),
    ],
});

0 Answers0