无法从资产文件夹中获取图像答案

【问题标题】：Can't get image from assets folder无法从资产文件夹中获取图像
【发布时间】：2019-08-07 09:03:02
【问题描述】：

我有这样的Vue 组件和Vuetify 组件：

<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>

图像位于/src/assets/img/ads 文件夹下。但我得到错误：

[Vuetify] Image load failed

src: /img/ads/4.jpg

我无法想象如何正确计算图像路径？我尝试了很多方法，但得到了同样的错误 - 我尝试使用 require、等等。在官方文档中，我没有找到从资产文件夹加载图像的正确方法。我使用最新版本的Vue 和Vuetify。

【问题讨论】：

如果您构建整个项目（即 npm run build），那么您的图像会在哪里结束？我假设 dist/img/ads/xx.jpg。您可能遇到了一些 webpack 问题。

标签： vue.js vuetify.js

【解决方案1】：

试试这个

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'},
        ]
  }
},

【讨论】：