Question

我有这样的array_merge_recursive();组件和@Test public void testNegativeAdjustments() { Instant now = Instant.now(); Duration amount = Duration.ofSeconds(5); TemporalAmount negativeAmount = amount.negated(); MutableClock underTest = new MutableClock(now, negativeAmount); assertThat(underTest.instant(), is(now)); assertThat(underTest.instant(), is(amount.subtractFrom(now))); }组件：

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，<％= BASE_URL％>等。在官方文档中，我找不到从资产文件夹加载图像的正确方法。我使用的是[Vuetify] Image load failed src: /img/ads/4.jpg和require的最新版本。

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

无法从素材资源文件夹获取图片

1 个答案: