vue img v-for bind

Question

I try to bind image source in my v-for loop. But five broken images are shown.

Here is what my directory looks like enter image description here

App.vue

<template>
  <div id="app">
    <ProfileHeader></ProfileHeader>
    <ProfileContent :items="imgItems"/>
    <ProfileDetail></ProfileDetail>
  </div>
</template>

<script>
import ProfileContent from './components/ProfileContent.vue'

export default {
  components: {,
    'ProfileContent': ProfileContent
  },
  data () {
    return {
      imgItems: [
        {
          thumbnail: './assets/imgs/aa.PNG',
          description: '1'
        },
        {
          thumbnail: './assets/imgs/bb.PNG',
          description: '2'
        },
        {
          thumbnail: './assets/imgs/cc.PNG',
          description: '3'
        },
        {
          thumbnail: './assets/imgs/dd.PNG',
          description: '4'
        },
        {
          thumbnail: './assets/imgs/ee.PNG',
          description: '5'
        }
      ]
    }
  }
}
</script>

ProfileContent.vue

<template>
  <div class="container">
    <div class="gallery">
      <ul>
        <li v-for="(item, index) in items" :key="index">
          <img :src="item.thumbnail" class="gallery-image">
          {{ item.thumbnail }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: { type: Array, default: () => [] }
  }
}
</script>

The result looks like this. enter image description here

I hope you can help me. thanks!XD

Answer 1

What you do in Vue is correct. The problem is with your image paths: To use relative paths leave the ./ and just write assets/imgs/aa.PNG. (considering that <host>/assets is an accessible public folder; e.g. https://www.example.com/assets)

If you are trying to include your images in your bundle with webpack imports you have to use webpacks require function. Unfortunately webpack does not recognize regular relative paths. It would look like so:

 imgItems: [
   {
     thumbnail: require('./assets/imgs/as.png'),
     description: '1',
   },
   ...
 ]