vue cant get dynamic image path from json file

Question

I'm dynamically getting data out of my Skills.json file which is working fine. However now I have added a path to an image to the object but when I put this path in my image src it says: GET http://localhost:8080/icons/vue.png 404 (Not Found)

My folder structure looks like this: folder structure

In the mainContainerSkills.vue I show the data from the object dynamically which I get from my Projects.json. In my Projects.json I added the path of the image like this:

{
  "skills": [
    {
      "name": "skills",
      "frontend": [
        {
          "id": "1",
          "name": "Vue",
          "icon": "./icons/vue.png"
        },
        {
          "id": "2",
          "name": "HTML",
          "icon": "./icons/javascript.png"
        },
        {
          "id": "3",
          "name": "Javascript",
          "icon": "./icons/html.png"
        }
      ]
    }
  ]
}

A playground with the code I have

I tried changing my path from this "icon": "./icons/vue.png" to this: "icon": "../../data/icons/vue.png" but this is also not solving the problem

EDIT

I now changed my json file to this:

{
  "skills": [
    {
      "name": "skills",
      "frontend": [
        {
          "id": "1",
          "name": "Vue",
          "icon": "vue"
        },
        {
          "id": "2",
          "name": "HTML",
          "icon": "html"
        },
        {
          "id": "3",
          "name": "Javascript",
          "icon": "javascript"
        }
      ]
    }
  ]
}

and my image tag to this:

<img class="ml-2 max-h-6 max-w-6" :src="'../../assets/icons/' + frontend.icon + '.png'"  alt="icon">

In devtools it show that the image path is: http://localhost:8080/assets/icons/vue.png

But I'm still getting the error: GET http://localhost:8080/assets/icons/html.png 404 (Not Found)

Answer 1

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.