CODEWITHSUNDEEP
vue.jsvuetify.js
prabina sht
prabina sht

Reputation: 217

Unable to display multiple image slider per page from a local folder not working with vue.js

I'm trying to show multiple images in a slider per page using vuetify as well as Vue-awesome-swiper but doesnot work . Please help me.

     <v-sheet class="mx-auto" elevation="8" max-width="100%">
      <v-slide-group multiple show-arrows>
        <v-slide-item v-for="(n, i) in images" :key="i" v-slot:default="{ active, toggle }">
          <v-img :src="n.src" class="ma-4" height="250" width="300"/>
     
        </v-slide-item>
      </v-slide-group>
    </v-sheet>

  data: () => ({
     images: [
      { alt: "A kitten", src: "require(`@/assets/images/workplan.jpg`)" },
      { alt: "A kitten", src: "require(`@/assets/images/workplan.jpg`)" },
      { alt: "A kitten", src: "require(`@/assets/images/workplan.jpg`)" },    
      { alt: "A kitten", src: "require(`@/assets/images/workplan.jpg`)" }
    ]
  }),

Upvotes: 1

Views: 1109

Answers (1)

Blackraspberryyy
Blackraspberryyy

Reputation: 2134

Here's what I've noticed in your code:

  1. It should be :src="n.src" and not @src="{{ n.src }}". @ is short for v-on whereas : is short for v-bind. What we need is v-bind:src and there is no such thing as v-on:src as far as I know.
  2. Provide a proper :key to each <v-slide-item/>. Avoid using non-primitive value for key.
  3. Use Vuetify's <v-img/> component over <img/> tags.

enter image description here

Here's a demo.

Upvotes: 2

Related Questions