CODEWITHSUNDEEP
vue.jsvuetify.js
Lynn
Lynn

Reputation: 121

Vuetify Image load failed

I have a problem Loading some Image in Vuejs using v-img inside v-carousel-item. I get this error. Is there any error in my code?

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

enter image description here enter image description here I am sure about the location of my images

Upvotes: 1

Views: 1019

Answers (1)

tao
tao

Reputation: 90013

Vue uses Vue Loader to handle assets. What it does is it parses your SFC's looking for any required resources in your template or in your controller.

For any such relative URL found in template, Vue will wrap it inside a require call. Read about it here.

However, for any paths used in controller, you need to require them yourself (to tell the loader: add them to the bundle and replace the relative filepath URL with the relative application URL).

Long story short, simply do this

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

Do note that this translation from filepath relative urls to app relative urls happens at compile time, not at runtime.
To see what they get compiled into, simply console.log(this.images) in mounted().

Upvotes: 2

Related Questions