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

user_5052803 0
Viewed 3091

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"
vuejs2 backticks templates
2 Answers

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="">
user_52046950
Related