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

Question

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"

Why not use `computed properties`? for ex: `computed: getImageSource() { return 'assests/img/' + this.playerDetail.pic }` — Pradeepb, May 20 '17 at 09:25
Thanks! I ended up doing something similar `computed: { getImageSource() { return require('../assets/img/' + this.playerDetail.pic ); } },` — Loomernescent, May 23 '17 at 08:55

score 3 · Answer 1 · answered May 20 '17 at 10:24

3

Do it like this

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

answered May 20 '17 at 10:24

Vamsi Krishna

30,568
8
70
78

Thanks @user7814783 this worked but I ran into issues with the webpack-simple template and the app not being able to find the images unless I copied them across to the dist/ folder so I ended up using a computed. – Loomernescent May 23 '17 at 09:05

score 1 · Answer 2 · edited Jul 16 '22 at 01:31

1

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

edited Jul 16 '22 at 01:31

tony19

125,647
18
229
307

answered Nov 23 '17 at 10:35

user5204695

35
8

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

2 Answers2