Vue: Image src attribute causes a 404 before the compilation

Created on 12 Feb 2014 · 18Comments · Source: vuejs/vue

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.

Source

ayamflow

😕1

Most helpful comment

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

yyx990803 on 12 Feb 2014

👍14 😄6 🎉3 ❤1

All 18 comments

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

yyx990803 on 12 Feb 2014

👍14 😄6 🎉3 ❤1

Great! Should have asked in the FAQ.

ayamflow on 12 Feb 2014

If the img tag is not affiliated to window.document, but to any other document, setting img.src won't trigger a download. Give a try at http://jsfiddle.net/w3EYt/

kapouer on 11 Apr 2014

@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 26 Nov 2015

👍5

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]
    }
  },

raywill on 18 Apr 2016

😕6 👍3 🎉1

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

thattomperson on 18 Apr 2016

👍8 😕1

dickyeka on 10 May 2016

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

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

ryantbrown on 15 May 2016

👍12

Id love to know why the image request is even made. If you place an img tag with a hardcoded src into a div which is "ng-if=false", the image request still is made even if the template is not rendered.

Plunkr here: https://plnkr.co/edit/F1HquA0vUnnrjkPcs0Te

Open the console and look at the 404 when requesting the image

puopg on 14 Oct 2016

Becuase in vue 1.x the template is in the dom before vue has had a chance to find / parse / render all of the elements

the browser sees the <img src="url"> before vue does and tries to download it

thattomperson on 17 Oct 2016

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

xereda on 11 Nov 2016

👍5

i want to change 404 images that i get with vue-resource to placeholder image. when i use <img :src="p.url"> or <img :src="p.src"> its result blank space. its ok, but the problem is images link that provide 200 success got blank too.
is there any solution ? thanks before

jauharibill on 27 Dec 2016

I got this solution at this link . there are not use vue directive. is there anymore perfect solution espesially from vuejs?

<html>
<head>
<script type="text/javascript">
function ImgError(source){
    source.src = "/noimage.gif";
    source.onerror = "";
    return true;
}
</script>
</head>

<body>
<img src="image_example1.jpg" onerror="ImgError(this)" />
</body>
</html>

jauharibill on 27 Dec 2016

this post is old but im having a similiar issue but in my case im getting a 400 bad request on an image source binding. So i have images that i want to load for employees so :

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

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

</div>

Every property loads fine but i get a 400 for each image. Vue seems to be encoding my string:

http: //vue.dev/images/staff/%07Thompson_Jen.jpg

if i navigate to the url without the %07 the image gets loaded. Any reason why its tacking %07 ?

surgiie on 30 Dec 2016

@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 31 Dec 2016

👍1

@billxcode Thanks a lot! I had the same problem with 404 errors and your tip helped me after some days of searching a solution! :)

blackforestcode on 16 Jan 2017

I am currently having a loading problem. v-attr:"src:image" returns an invalid template error. But the image does load, with :src , then gives errors. Point me to a fix somewhere?