Why is Vue.js unable to find assets?

Question

My Vue.js web application is unable to find files with correct paths. I have checked the paths like 10 times, they are all correct and all give the 404 error. I tried relative path, absolute path and whatnot. There must be some Vue peculiarity which makes it unable to find the images.

The browser gives the following request summary (the path is given as '../assets/images/user.png'):

URL: http://localhost:8080/assets/images/user.png
Status: 404 Not Found
Source: Network
Address: 127.0.0.1:8080

A screenshot from VSCode:

MainPageBody.vue is the component that is supposed to show the images.
Been stuck at this for a while now.

Update: Followed @kissu's advice and used v-for, also created a brand new Vue project and copied my files there. However, the images are still throwing 404s. I must be doing something wrong. Tried using require(), that didn't help either.

The .json file on the URL may look something like:

{
    "posts": [
        {
            "author": "Samuel",
            "profilePicName": "../assets/images/user.png",
            "text": "Look at my dog!",
            "picName": "../assets/images/dog.jpg",
            "date": "29. Sept 2022"
        },

        {
            "author": "Bob",
            "profilePicName": "../assets/images/bob.jpg",
            "text": "Hello, I am Bob",
            "picName": "../assets/images/bob.jpg",
            "date": "7. Sept 2022"
        }
    ]
}

Reproducible example: I tried my best to make a reproducible example. I assume you still need to create a Vue project to reproduce my errors? If there is anything missing you need me to add, let me know.

<!-- MainPageBody.vue -->
<template>
    <div v-for="post in posts" :key="post.id"> 
        <!-- text comes through fine, image is not found -->
        <img :src="post.picName" />
        <p>{{ post.text }}</p>
    </div>
</template>

<script>
import { nanoid } from 'nanoid'

export default {

    data() {
        return {
            posts: null
        }
    },

    async created() {
        const response = await fetch('https://api.npoint.io/21b1db5b0e48a83466da') // working URL for json file
        const { posts } = await response.json()
        this.posts = posts.map((post) => {
            return { ...post, isHeld: false, id: nanoid() };
        })
    }
}
</script>

<!-- App.vue -->
<template>
    <MainPageBody/>
</template>

<script>
import MainPageBody from './components/MainPageBody.vue';

export default {
    name: 'App',
    components: {
    MainPageBody
    }
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

Answer 1

Those links may be helpful regarding how to load dynamic images with Vite.
Especially this answer with the 2022 answer: Vite 2.8.6 + Vue 3.2.31 part. The ./logo.png in there would be replaced by your dynamic profilePicName variable.

Otherwise, what you're doing in the lines below let out = '' is not something that you should do. Don't iterate on your object inside of a JS function like that. Instead, use a v-for and push each key of your object to the desired part. text can be wrapped in a {{ text }} while profilePicName goes to an :src.

Here is an example that I wrote recently that is using a (poorly designed) API with a basic v-for to iterate on all the keys of the object. Not directly a 1:1 to your case but could still be helpful IMO.

---

PS: if you could confirm us if you're using Webpack or Vite, that would be nice (can change the way dynamic images are imported with Webpack for example). Run your local dev server to find out (can post an image there afterwards).

---

Update

If you don't have a unique ID coming from the API you're using, you can always use nanoid. It's lightweight and will guarantee you no-collision regarding the uniqueness of your UUIDs. The guys maintaining the projects are good developers and super serious too.

Edit your objects with something like this

<template>
  <section>
    <div v-for="post in posts" :key="post.id">
      id: {{ post.id }} ~ author: {{ post.author }}
    </div>
  </section>
</template>

<script>
import { nanoid } from 'nanoid' // import it here

export default {
  data() {
    return {
      posts: [
        {
          id: nanoid(), // run it on each object
          author: 'Samuel',
          profilePicName: '../assets/images/user.png',
          text: 'Look at my dog!',
          picName: '../assets/images/dog.jpg',
          date: '29. Sept 2022',
        },
        {
          id: nanoid(),
          author: 'Bob',
          profilePicName: '../assets/images/user2.png',
          text: 'cool cat',
          picName: '../assets/images/cat.jpg',
          date: '13. Sept 2022',
        },
        {
          id: nanoid(),
          author: 'Sponge',
          profilePicName: '../assets/images/user3.png',
          text: 'cool fox',
          picName: '../assets/images/fox.jpg',
          date: '24 December 2022',
        },
      ],
    }
  },
}
</script>

You can of course initially first fetch your objects, then iterate on it with a .map, no need to have both at the same time.

---

Update

For your HTTP call, try something like this rather (you were not properly chaining with .then and .then is not recommended in comparison to async/await)

async created() {
  const response = await fetch('json_url_here')
  const { posts } = await response.json()
  this.posts = posts.map((post) => {
    return { ...post, isHeld: false, id: nanoid() }
  })
},