How to load images from data array using Vue js?

Question

I'm using Quasar and Vue js to practice building Web and Mobile Apps using a single codebase. I'm having a strange issue. I created a meals array in the data property and I'm trying to display the data and an image inside a List component. I'm able to see the data, except I only see the apple.png image and not the two others. I have no idea why this would be. I put the images directly in the public directory and the filenames of the images are correct. And when I inspect the two images that aren't displaying, it is showing the name of the photo from the photo property correctly just like apple.png.

PageMeals.vue:

<template>
  <q-page>
    <q-list bordered padding>
      <q-item
      v-for="meal in meals"
      :key="meal.id"
      >
        <q-item-section top avatar>
          <q-avatar rounded>
            <img :src="`img/${meal.photo}`" alt="">
          </q-avatar>
        </q-item-section>

        <q-item-section>
          <q-item-label>{{meal.name}}</q-item-label>
          <q-item-label caption>{{meal.description}}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>

<script>
export default {
  name: 'PageMeals',
  data () {
    return {
      meals: [
        {
          id: '1',
          name: 'Apple',
          description: 'Juicy red Granny Smith apples.',
          photo: 'apple.png',
          grams: '25',
          calories: '120',
          added: false
        },
        {
          id: '2',
          name: 'Sandwich',
          description: 'Fresh white Tuna sandwich with tomatoes, lettuce, swiss cheese and apple wood smoked bacon.',
          photo: 'sandwich.png',
          grams: '45',
          calories: '240',
          added: false
        },
        {
          id: '3',
          name: 'Salad with chicken',
          description: 'Caesar salad, with parmesan cheese, croutons and tender juicy grilled chicken strips.',
          photo: 'salad-with-chicken.png',
          grams: '35',
          calories: '190',
          added: false
        }
      ]
    }
  }
}
</script>

1. What am I doing wrong?
2. Is it better to store images in the public folder or assets folder?

Answer 1

A little late, but in case somebody need it, when you need to load some dynamics media, the best way inside a v-for loop is with require:

<img :src="require(`../assets/display/${your_image_name}.svg`)"/>