Vue 1.0 src binding

Question

It doesn't work. Why?

<img v-if="item.foto.src" v-bind:src="item.foto.src" width="{{item.foto.width}}" height="{{item.foto.height}}" />

This causes an error in browser, although the image is displayed

   <img v-if="item.foto.src" src="/{{item.foto.src}}" width="{{item.foto.width}}" height="{{item.foto.height}}" />

%7B%7Bitem.foto.src%7D%7D 404 (Not Found)

Possible duplicate of [Vue.js dynamic images not working](http://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working) — Saurabh, Feb 03 '17 at 03:24

score 0 · Answer 1 · answered Feb 02 '17 at 20:40

0

The first one would not produce a 404 (if the path was correct, you're missing the /), the second one would.

You'd need to do:

<img :src="'/' + item.foto.src">

answered Feb 02 '17 at 20:40

Bill Criswell

This answer should work, but there could be some issues if you are using webpack and serving images via webpack. – Belmin Bedak Feb 02 '17 at 21:59

1 Answers1