J'ai un cas où dans mon Vue.js
avec l' webpack
application web, j'ai besoin d'afficher des images dynamiques. Je veux montrer img
où le nom de fichier des images est stocké dans une variable. Cette variable est une computed
propriété qui renvoie une Vuex
variable de magasin, qui est remplie de manière asynchrone sur beforeMount
.
<div class="col-lg-2" v-for="pic in pics">
<img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>
Cependant, cela fonctionne parfaitement quand je fais juste:
<img src="../assets/dog.png" alt="dog">
Mon cas est similaire à ce violon , mais ici cela fonctionne avec une URL img, mais dans le mien avec des chemins de fichiers réels, cela ne fonctionne pas.
Quelle devrait être la bonne façon de le faire?
javascript
html
vue.js
vuejs2
Saurabh
la source
la source
@/assets/
+ items.image) "height =" 200px "> </v-img>` celui-ci a également résolu le problèmeRéponses:
J'ai fait fonctionner cela en suivant le code
getImgUrl(pet) { var images = require.context('../assets/', false, /\.png$/) return images('./' + pet + ".png") }
et en HTML:
<div class="col-lg-2" v-for="pic in pics"> <img :src="getImgUrl(pic)" v-bind:alt="pic"> </div>
Mais je ne sais pas pourquoi mon approche précédente n'a pas fonctionné.
la source
Voici un raccourci que Webpack utilisera pour que vous n'ayez pas à l'utiliser
require.context
.HTML:
<div class="col-lg-2" v-for="pic in pics"> <img :src="getImgUrl(pic)" v-bind:alt="pic"> </div>
Méthode Vue:
getImgUrl(pic) { return require('../assets/'+pic) }
Et je trouve que les 2 premiers paragraphes ici expliquent pourquoi cela fonctionne? bien.
Veuillez noter que c'est une bonne idée de placer les images de vos animaux de compagnie dans un sous-répertoire, au lieu de les insérer avec tous vos autres éléments d'image. Ainsi:
./assets/pets/
la source
@/assets/
+ items.image) "height =" 200px "> </v-img>` celui-ci a également résolu le problèmeVous pouvez essayer la
require
fonction. comme ça:<img :src="require(`@/xxx/${name}.png`)" alt class="icon" />
la source
@
symbole est-il nécessaire?@
Le symbole n'est pas obligatoire, il représente offten votre répertoiresrc
lorsque vous utilisez Resolve | webpack (vue-cli est déjà configuré ceci.).Il existe une autre façon de le faire en ajoutant vos fichiers image à un dossier public au lieu d'actifs et en accédant à ceux-ci sous forme d'images statiques.
<img :src="'/img/' + pic + '.png'" v-bind:alt="pic" >
C'est là que vous devez mettre vos images statiques:
la source
Votre meilleur pari est d'utiliser simplement une méthode simple pour créer la chaîne correcte pour l'image à l'index donné:
methods: { getPic(index) { return '../assets/' + this.pics[index] + '.png'; } }
puis procédez comme suit dans votre
v-for
:<div class="col-lg-2" v-for="(pic, index) in pics"> <img :src="getPic(index)" v-bind:alt="pic"> </div>
Voici le JSFiddle (évidemment les images ne s'affichent pas, j'ai donc mis l'image à
src
côté de l'image):https://jsfiddle.net/q2rzssxr/
la source
J'ai également rencontré ce problème et il semble que les deux réponses les plus votées fonctionnent mais il y a un petit problème, webpack jette une erreur dans la console du navigateur (Erreur: Impossible de trouver le module './undefined' sur webpackContextResolve), ce qui n'est pas très agréable.
Donc je l'ai résolu un peu différemment. Le problème avec la variable à l'intérieur de l'instruction require est que l'instruction require est exécutée pendant le regroupement et la variable à l'intérieur de cette instruction n'apparaît que pendant l'exécution de l'application dans le navigateur. Ainsi, Webpack considère l'image requise comme non définie dans les deux cas, car lors de la compilation, cette variable n'existe pas.
Ce que j'ai fait, c'est de placer une image aléatoire dans une instruction require et de cacher cette image en css pour que personne ne la voie.
// template <img class="user-image-svg" :class="[this.hidden? 'hidden' : '']" :src="userAvatar" alt /> //js data() { return { userAvatar: require('@/assets/avatar1.svg'), hidden: true } } //css .hidden {display: none}
L'image fait partie des informations de la base de données via Vuex et est mappée au composant en tant que
computed: { user() { return this.$store.state.auth.user; } }
Donc, une fois que ces informations sont disponibles, je remplace l'image initiale par l'image réelle
watch: { user(userData) { this.userAvatar = require(`@/assets/${userData.avatar}`); this.hidden = false; } }
la source
Voici une réponse très simple. :RÉ
<div class="col-lg-2" v-for="pic in pics"> <img :src="`../assets/${pic}.png`" :alt="pic"> </div>
la source
Vous pouvez utiliser le bloc try catch pour vous aider avec les images non trouvées
getProductImage(id) { var images = require.context('@/assets/', false, /\.jpg$/) let productImage = '' try { productImage = images(`./product${id}.jpg`) } catch (error) { productImage = images(`./no_image.jpg`) } return productImage },
la source
<img src="../assets/graph_selected.svg"/>
Le chemin statique est résolu par Webpack en tant que dépendance de module via le chargeur. Mais pour le chemin dynamique, vous devez utiliser require pour résoudre le chemin. Vous pouvez ensuite basculer entre les images à l'aide d'une variable booléenne et d'une expression ternaire.
<img :src="this.graph ? require( `../assets/graph_selected.svg`) : require( `../assets/graph_unselected.svg`) " alt="">
Et bien sûr, basculez la valeur du booléen via un gestionnaire d'événements.
la source
:src="require(
../assets/category_avatar/baby_kids.jpeg)"
eh bien, le moyen le plus simple et le plus efficace qui a fonctionné pour moi était celui dont je récupérais des données à partir d'une API.
methods: { getPic(index) { return this.data_response.user_Image_path + index; } }
la méthode getPic prend un paramètre qui est le nom du fichier et elle renvoie le chemin absolu du fichier peut-être depuis votre serveur avec le nom de fichier simple ...
voici un exemple de composant où j'ai utilisé ceci:
<template> <div class="view-post"> <div class="container"> <div class="form-group"> <label for=""></label> <input type="text" class="form-control" name="" id="" aria-describedby="helpId" placeholder="search here"> <small id="helpId" class="form-text user-search text-muted">search for a user here</small> </div> <table class="table table-striped "> <thead> <tr> <th>name</th> <th>email</th> <th>age</th> <th>photo</th> </tr> </thead> <tbody> <tr v-bind:key="user_data_get.id" v-for="user_data_get in data_response.data"> <td scope="row">{{ user_data_get.username }}</td> <td>{{ user_data_get.email }}</td> <td>{{ user_data_get.userage }}</td> <td><img :src="getPic(user_data_get.image)" clas="img_resize" style="height:50px;width:50px;"/></td> </tr> </tbody> </table> </div> </div> </template> <script> import axios from 'axios'; export default { name: 'view', components: { }, props:["url"], data() { return { data_response:"", image_path:"", } }, methods: { getPic(index) { return this.data_response.user_Image_path + index; } }, created() { const res_data = axios({ method: 'post', url: this.url.link+"/view", headers:{ 'Authorization': this.url.headers.Authorization, 'content-type':this.url.headers.type, } }) .then((response)=> { //handle success this.data_response = response.data; this.image_path = this.data_response.user_Image_path; console.log(this.data_response.data) }) .catch(function (response) { //handle error console.log(response); }); }, } </script> <style scoped> </style>
la source
J'ai rencontré le même problème. Cela a fonctionné pour moi en remplaçant «../assets/» par «./assets/».
<img v-bind:src="'./assets/' + pic + '.png'" v-bind:alt="pic">
la source
Essayez d'importer une image comme celle-ci, car Webpack devrait connaître sa dépendance
<ul> <li v-for="social in socials" v-bind:key="social.socialId" > <a :href="social.socialWeb" target="_blank"> <img class="img-fill" :id="social.socialId" :src="social.socialLink" :alt="social.socialName"> </a> </li> </ul> <script> import Image1 from '@/assets/images/social/twitter.svg' import Image2 from '@/assets/images/social/facebook.svg' import Image3 from '@/assets/images/social/rss.svg' export default { data(){ return{ socials:[{ socialId:1, socialName: "twitter", socialLink: Image1, socialWeb: "http://twitter.com" }, { socialId:2, socialName: "facebook", socialLink: Image2, socialWeb: "http://facebook.com" }, { socialId:3, socialName: "rss", socialLink: Image3, socialWeb: "http://rss.com" }] </script>
la source