Question

我在使用v-img内的v-carousel-item在Vuejs中加载某些图像时遇到问题。我得到这个错误。我的代码有任何错误吗？

<template>
  <v-carousel cycle height="400" hide-delimiter-background show-arrows-on-hover>
    <v-carousel-item v-for="(image, i) in images" :key="i">
      <v-sheet height="100%">
        <v-row class="fill-height" align="center" justify="center">
          <!-- <div class="display-3">{{ slide }} Slide</div> -->
           <v-img :src="getImg(i)" />
          <!-- <v-img src="../MyAnimeArtworks/1.jpg"></v-img>  THIS LINE WORKS-->
        </v-row>
      </v-sheet>
    </v-carousel-item>
  </v-carousel>
</template>

<script>
export default {
  data() {
    return {
      getImg(index) {
        return require(this.images[index]);
      },
      images: [
        "../MyAnimeArtworks/1.jpg",
        "../MyAnimeArtworks/2.jpg",
        "../MyAnimeArtworks/3.jpg",
        "../MyAnimeArtworks/4.jpg",
        "../MyAnimeArtworks/5.jpg"
      ],
      colors: [
        "indigo",
        "warning",
        "pink darken-2",
        "red lighten-1",
        "deep-purple accent-4"
      ],
      slides: ["First", "Second", "Third", "Fourth", "Fifth"]
    };
  }
};
</script>

我确定图片的位置

Answer 1

Vue使用Vue Loader处理资产。它的作用是解析SFC在模板或控制器中寻找任何require d个资源。

对于模板中找到的任何此类相对URL，Vue会将其包装在require调用中。阅读有关here的信息。

但是，对于控制器中使用的任何路径，您都需要自己require（告诉加载程序：将它们添加到包中，并将相对文件路径URL替换为相对应用程序URL）。

长话短说，只需执行

...,
data: () => ({
  ...
  images: [
    "../MyAnimeArtworks/1.jpg",
    "../MyAnimeArtworks/2.jpg",
    "../MyAnimeArtworks/3.jpg",
    "../MyAnimeArtworks/4.jpg",
    "../MyAnimeArtworks/5.jpg"
  ].map(i => require(i)),
  ...
}),
...

请注意，从文件路径相对URL到应用程序相对URL的这种转换是在编译时发生的，而不是在运行时发生的。
要查看它们被编译成什么，只需在console.log(this.images)中使用mounted()。

Vuetify图像加载失败

1 个答案: