CODEWITHSUNDEEP
templatesvuejs2backticks
Loomernescent
Loomernescent

Reputation: 91

Vue JS v-bind image src attribute combining path string with object value not working

Clearly I'm missing something simple here. Inside a template I'm simply trying to add a path to an image file name sourced from an object. I've tried a bunch of things, back ticks mustaches, etc. but Vue doesn't like any of them. How do I format this properly?

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


playerDetail.pic = "player_image.png"

Upvotes: 6

Views: 3726

Answers (2)

user5204695
user5204695

Reputation: 105

Vue does not support using Mustache syntax on HTML attributes.Reference

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

or

you can use the ES6 Template literals

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

Upvotes: 1

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

Do it like this

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

Upvotes: 4

Related Questions