L'attribut v-bind image src de Vue JS combinant une chaîne de chemin d'accès avec une valeur d'objet ne fonctionne pas

Question

Il est clair que je rate quelque chose de simple ici. Dans un modèle, j'essaie simplement d'ajouter un chemin d'accès à un nom de fichier image provenant d'un objet. J'ai essayé un tas de choses, des tics arrière, des moustaches, etc. mais Vue n'aime rien de tout cela. Comment puis-je formater cela correctement ?

<img class="img-fluid" v-bind:src="assets/img/" {{playerDetail.pic}} alt="">

playerDetail.pic = "player_image.png"

Answer 1

Faites-le comme ceci

img class="img-fluid" v-bind:src="'assets/img/' + playerDetail.pic" alt="">

Answer 2

Vue ne prend pas en charge l'utilisation de la syntaxe Mustache sur les attributs HTML. Référence

img class="img-fluid" :src="'assets/img/' + playerDetail.pic" alt="">

o

vous pouvez utiliser l'ES6 Les littéraux des modèles

img class="img-fluid" :src="`assets/img/${playerDetail.pic}`" alt="">