[Vuejs]-Vue cant get dynamic image path from json file

by

0👍

what’s is your folder structure, the correcty is:

src/
  assets/
    icons/
      vue.png
  components/
  data/

And on the Skills.json use for any results:

{
  "skills": [
    {
      "name": "skills",
      "frontend": [
        {
          "id": "1",
          "name": "Vue",
          "icon": "@/assets/icons/vue.png"
        },
        ...
      ]
    }
  ]
}

And for check everything is fine, use require to import the img

<template>
  <div>
    <div v-for="skill in skills.frontend" :key="skill.id">
      <p>{{ skill.name }}</p>
      <img :src="require(skill.icon)" alt="skill icon" />
    </div>
  </div>
</template>

import Skills from '@/data/Skills.json';

export default {
  data() {
    return {
      skills: Skills.skills[0]
    }
  }
}
</script>

This will sold your problem, if not solv, post your code to we see.

Leave a comment