Can't get image from assets folder

Question

I have such Vue component with Vuetify components:

<template>
  <div>
    <v-container fluid>
      <v-layout row>
        <v-flex xs12>
          <v-carousel cycle continuous>
            <v-carousel-item v-for="slide in slides" :key="slide.id">
              <v-sheet
                      :color="slide.color"
                      height="100%"
                      tile
              >
                <v-layout
                        align-center
                        fill-height
                        justify-center
                >
                  <div class="display-3">{{ slide.text }}</div>
                </v-layout>
              </v-sheet>
            </v-carousel-item>
          </v-carousel>
        </v-flex>
      </v-layout>
    </v-container>
    <v-container>
      <v-layout row>
        <v-flex
                xs12
                v-for="ad of ads"
                :key="ad.id"
        >
          <v-card
                  class="mx-auto"
                  max-width="400"
          >
            <v-img
                    class="white--text"
                    height="200px"
                    :src="ad.imageSrc"
            >
              <v-card-title class="align-end fill-height">{{ ad.title }}</v-card-title>
            </v-img>

            <v-card-text>
              <span>Number {{ ad.id }}</span><br>
              <span class="text--primary">
        <span>{{ ad.text }}</span>
      </span>
            </v-card-text>

            <v-card-actions>
              <v-btn
                      text
                      color="orange"
              >
                Share
              </v-btn>
              <v-btn
                      text
                      color="orange"
              >
                Explore
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        slides: [
          { color: 'primary', text: 'Place ads for free. Forever.' , id: 1},
          { color: 'secondary', text: 'Find your desire for acceptable price.', id: 2},
          { color: 'orange', text: 'Sell junk and make money.', id: 3},
        ],
        ads: [
          { id: 1, imageSrc: '@/src/assets/img/ads/1.jpg', title: 'Title 1'},
          { id: 2, imageSrc: '@/src/assets/img/ads/2.jpg', title: 'Title 2'},
          { id: 3, imageSrc: '@/src/assets/img/ads/3.jpg', title: 'Title 3'},
          { id: 4, imageSrc: '@/src/assets/img/ads/4.jpg', title: 'Title 4'},
        ],
        publicPath: process.env.BASE_URL
      }
    }
  }
</script>

<style scoped>

</style>

Images are under /src/assets/img/ads folder. But I get error:

[Vuetify] Image load failed

src: /img/ads/4.jpg

I can't imagine how to properly compute images path? I tried many ways, but got same error - I tried using require, <%= BASE_URL %> and so on. In official documentation I didn't find a right method to load images from assets folder. I use last versions of Vue and Vuetify.

Answer 1

Try this

data () {
  return {
//other datas
    ads: [
          { id: 1, imageSrc: require('@/assets/img/ads/1.jpg'), title: 'Title 1'},
          { id: 2, imageSrc: require('@/assets/img/ads/2.jpg'), title: 'Title 2'},
          { id: 3, imageSrc: require('@/assets/img/ads/3.jpg'), title: 'Title 3'},
          { id: 4, imageSrc: require('@/assets/img/ads/4.jpg'), title: 'Title 4'},
        ]
  }
},