web-dev-qa-db-fra.com

Échec du chargement de l'image Vuetify Standard Setup (babel/eslint)

Je travaille sur un projet VueJS et j'essaie de charger une image sur un carrousel. J'utilise la configuration standard et l'image se trouve dans le dossier des ressources . Je référence l'URL de l'image avec 

<v-carousel-item src="@/assets/promo1.jpg">

Mais ceci génère une erreur Image Load Failed lorsque j'exécute le serveur avec npm run serve .

console.js?66f6:36 [Vuetify] Image load failed

src: @/assets/promo1.jpg

found in

---> <VImg>
       <VCarouselItem>
         <VCarousel>
           <Home> at src/views/Home.vue
             <VApp>
               <App> at src/App.vue
                 <Root>

Si l'une des suggestions concerne la configuration du WebPack, je n'arrive pas à le trouver. Notez également que l’image initiale sur le modèle de départ a bien fonctionné. Mais mes images personnalisées ne fonctionnent pas. 

urlvue.jswebpackvuetify.jsvue-cli-3
3
VihanAgarwal

Si vous avez encore besoin d'aide, vous pouvez essayer ceci:

<script>
export default {
  data() {
    return {
      items: [
        {src: require('@/assets/img1.jpg')},
        {src: require('@/assets/img.jpg')}
      ]
    }
  }
}
</script>

et utilise: 

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

Bonne chance

5
Sildeman Dourado Araújo

Le module vue-loader utilisé par vue-cli 3 ne peut pas résoudre seul les chemins relatifs aux actifs statiques; Il a besoin d'indices ... La réponse de Slideman est bonne et le piratage qu'il suggère est exactement ce que vue-loader doit faire en arrière-plan pour résoudre les chemins relatifs avec succès. C'est juste qu'il ne peut pas le faire tout de suite pour les composants de vue personnalisés (balises qui ne font pas partie de la spécification HTML5).

J'ai fait face aux mêmes problèmes il y a quelques semaines et j'ai trouvé une solution que j'ai ajoutée à vuetify's documentation (FAQ, section sur les images relatives ne fonctionnant pas pour les composants personnalisés). L'essentiel de la solution est que vous pouvez accéder à l'option "transformAssetUrls" de vue-loader en utilisant le plugin chainWebpack dans votre fichier vue.config.js.

Comme vous pouvez le constater dans la documentation, vous devez répertorier tous les noms de composants personnalisés pour lesquels vous référencez des actifs statiques, ainsi que les noms des attributs où leurs chemins relatifs sont écrits:

// vue.config.js
module.exports = {
 chainWebpack: config => {
   config.module
     .rule('vue')
     .use('vue-loader')
     .loader('vue-loader')
     .tap(options => Object.assign(options, {
           transformAssetUrls: {
              'v-img': ['src', 'lazy-src'],
              'v-card': 'src',
              'v-card-media': 'src',
              'v-responsive': 'src',
              'v-carousel-item': 'src',
              //...
           }
           }))
 }
   //...
}

J'espère que ça aide; si vous ne comprenez pas bien, n'hésitez pas à poser des questions supplémentaires.

4
Landry BETE
  1. jpg et jpeg importait pour moi. Les images ne se chargent pas en jpg peut fonctionner si vous donnez l'extension jpeg. (Je ne sais pas comment cela pourrait arriver, mais cela m'a fonctionné une fois)
  2. au lieu de src="@/assets/promo1.jpg"src="src/assets/promo1.jpg" m'a travaillé dans un autre cas.

Essayez ces choses et laissez-nous savoir. =)

0
Pathum Samararathna