vue: Image src attribute causes a 404 before the compilation

Hello,

with a template like this: <img src="{{image}} />

and javascript:

var vue = new Vue({
    el: '#view',
    data: {
        image: 'http://somehost.com/image.jpg'
    }
});

gives the error:

GET http://myhost.com/%7B%7Bthumb%7D%7D 404 (Not Found)

The Angular team had some issue with it, which resulted in the ngSrc directive. NB: The same problem might happen with the href attribute, see ngHref as well.

Edit: Here comes the JSFiddle.

About this issue

Original URL
State: closed
Created 10 years ago
Reactions: 1
Comments: 18 (2 by maintainers)

Most upvoted comments

You can use v-attr="src: image" in this situation

+24

yyx990803 on Feb 12, 2014

@dickyeka the v-bind:src (or :src) evaluates an expression, you would need the following:

<img :src="'img/category/'+c.image" />

+12

ryantbrown on May 15, 2016

can anyone explain that if only one loop used, we can use src=‘xxxx’ without getting 404 error? in my case, error only occur in nested loops

// no error
    <ul>
      <li v-for="p in images">{{p.url}}<img src="{{p.url}}" /></li>
    </ul>

// 404 error in a nested loop
  <div v-for="p in loops">
    <ul>
      <li v-for="p in images">{{p.url}}<img src="{{p.url}}" /></li>
    </ul>
  </div>

data used:

  data() {
    return {
      images: [
        {url:'https://www.google.com.hk/images/logo.png'},
        {url:'http://cn.bing.com/sa/simg/CN_Logo_Gray.png'}
      ],
      loops: [1,2,3]
    }
  },

+10

raywill on Apr 18, 2016

@raywill As explained above use <img v-bind:src="p.url"> or <img :src="p.url">

thattomperson on Apr 18, 2016

template syntax error - invalid expression: v-attr=“src: image”

xereda on Nov 11, 2016

@aztack the recommended way is to use v-bind:src="item.src" or the shortcut :src="item.src".

v-bind="..." is there for cases when you want to construct the list of attributes programmatically.

simplesmiler on Nov 26, 2015

@surgiie is there your images content a white space at the first character? %07 at url encode mean white space. if its true, so try to trim() your images before its load. so your code looks like bellow :

methods at vue scope :

trimCharacter:function(e){
return e.trim();
}

vue directive

<div class="col-sm-4" v-for="employee in staff">

    <img :src="'/images/staff/'+trimCharacter(employee.imageName)">

</div>

jauharibill on Dec 31, 2016