CODEWITHSUNDEEP
vue.jsvuetify.js
Sooraj Kumar
Sooraj Kumar

Reputation: 41

Rendering of local images in <v-carousel-item> not working but online image links are working

I am new to vuejs and vuetify, I am trying to create a simple carousel component in a sample app created using the vue cli 3. I am able to get the carousel content but its not loading the local images present in the asset folder, but the sample images in the vuetify page containing an online link of the image is working.

<template>
<div> 
<v-carousel>
  <v-carousel-item v-for="i in 4" :key="i">
     <v-img contain :src="items[i]"></v-img>
  </v-carousel-item>
</v-carousel>
</div>
</template>
<script>
export default {
data() {
    items: [
        '../assets/img/PreviousYear/17/top10/2.PNG',
        '../assets/img/PreviousYear/17/top10/1.PNG',
        "https://cdn.vuetifyjs.com/images/carousel/bird.jpg",
        "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
      ]
  }
}
</script>

The images 1.PNG and 2.PNG is not working but the other two are. Can someone help me on this, what I am missing.

Upvotes: 4

Views: 9014

Answers (5)

rodurico
rodurico

Reputation: 771

For those using Vite, require() won't work. Vite has its own way to handle static assets:

Importing a static asset will return the resolved public URL when it is served

(this will handle dev and prod deployment nicely)

<template>
    <v-img :src="myImg"/>
</template>
        
<script>
import imgUrl from './img.png'

export default {
    data() {
        return { myImg: imgUrl }
    }
</script>

Upvotes: 0

Joshua Coda
Joshua Coda

Reputation: 91

I'm using Laravel, vuetify and this worked for me:

"vuetify": "^1.5.1",

webpack.mix.js

mix
  .js('resources/assets/js/app.js', 'public/js')
  .copyDirectory('resources/assets/img', 'public/img')

welcome.vue

 <template>
  <v-carousel>
    <v-carousel-item v-for="(item,i) in items" v-bind:src="item.src" :key="i"></v-carousel-item>
  </v-carousel>
</template>

<script>

export default {
  name: 'welcome-view',
  layout: 'default',

  metaInfo () {
    return { title: this.$t('home') }
  },
  data () {
   return {
     items: [
       {
         src: '/img/PreviousYear/17/top10/2.PNG'
       },
       {
         src: '/img/PreviousYear/17/top10/1.PNG'
       },
       {
         src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
       },
       {
         src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
       }
     ]
   }
 }
}
</script>

where resources/assets/img/PreviousYear/17/top10/2.PNG

Upvotes: 0

DjSh
DjSh

Reputation: 2764

"Vue loader converts relative paths into require functions automatically for you. Unfortunately, this is not the case when it comes to custom components. You can circumvent this issue by using require. If you're using Vuetify as a Vue-CLI 3 plugin, you can edit your project's vue.config.js file by modifying the options for vue-loader." from Vuetify

// Incorrect
<v-img src="../path/to/img" />

 // Correct
 <v-img :src="require('../path/to/img')" />

So, I would change your items array to this format:

items: [
    {
      src: require('../assets/img/PreviousYear/17/top10/2.PNG')
    },
    {
      src: require('../assets/img/PreviousYear/17/top10/1.PNG')
    },
    {
      src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
    },
    {
      src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
    }
  ]

And your html like this:

<v-carousel>
  <v-carousel-item
    v-for="(item,i) in items"
    :key="i"
    :src="item.src"
  ></v-carousel-item>
</v-carousel>

Hope it helps. :)

Upvotes: 12

Coko
Coko

Reputation: 28

I had a similar problem in my project. Try importing local files like this:

<script>
    var file1 = require('yourpath')
    var file2 = require('yourpath')

    export default {
    data() {
        items: [
            file1,
            file2,
            "onlineimage",
            "onlineimage"
          ]
      }
    }
</script>

This solved my problem. If it still doesn't work, check the path, you might need "./" or "@/" instead of "../".

Also, use array length for your v-for instead of a fixed number. Like this:

<v-carousel-item v-for="item in items" :src="item">
</v-carousel-item>

Or like this:

<v-carousel-item v-for="(item, i) in items" :key="i" :src="item">
</v-carousel-item>

Result is the same.

Upvotes: 0

Takachi
Takachi

Reputation: 751

I think the problem is in your v-for. Try to change it to this :

<v-carousel>
  <v-carousel-item v-for="item in items">
     <v-img contain :src="item"></v-img>
  </v-carousel-item>
</v-carousel>

As your items array only contains urls, you can loop through each item to use the value.

If it doesn't solve your problem, maybe your local url's aren't corrects and you have to verify your project tree to solve it.

Upvotes: 0

Related Questions