Vuetify 图片加载失败答案

【问题标题】：Vuetify Image load failedVuetify 图片加载失败
【发布时间】：2020-07-25 10:38:13
【问题描述】：

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

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

我确定我的图像的位置

【问题讨论】：

这能回答你的问题吗？ Vue.js - change undefined img source that I have created dynamically
你能告诉我们目录结构吗？
将"../MyAnimeArtworks/1.jpg" 替换为require("../MyAnimeArtworks/1.jpg")，Vue 会将它们放入包中，并将它们的名称替换为包中的实际文件名。为避免重复，请执行[...your files].map(i => require(i))
@tao 如果你看看我的 getimg 函数，已经有一个需求
认真的吗？您希望data 中的函数能够工作吗？请尝试我的建议。我也不确定一种方法在这里是否可行。 Afaik，需要在编译时发生，而不是在运行时发生。但是您的 getImg 可能会作为一种方法起作用。试试看。

标签： vue.js vuetify.js

【解决方案1】：

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

对于在模板中找到的任何此类相对 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()。

【讨论】：