img src data binding?

[elsodev]

Hi,

I have a html tag

<div id="content">
<img src="{{ imageLink }}"/>
</div>

var content = new Vue({
    el: '#content',
    data: {
        imageLink: 'http://somedomain/someimage.jpg'
    }
});

As you can see i am biding data imageLink to the html image src tag, it works, image is displayed as normal, but Chrome shows a 404 not found on the image link since its checking on the html img src syntax.

Is the way i'm doing correct or there is a better way?

[azamat-sharapov]

You should use v-attr="src: imageLink" for that. See what docs say about it: http://vuejs.org/api/directives.html#v-attr (tip in red)

[elsodev]

@azamat-sharapov ah i see, missed that, thanks for the pointers.

[ValorLin]

Thanks!

[vinhtq]

I also have the same problem.

In NewsCard.vue:

<template>
<img src="{{ url }}" />
</template>

<script>
export default {
    props: ['url']
}
</script>

In HomePage.vue:

<template>
<news-card url="../assets/image.png"></news-card>
</template>

<script>
import NewsCard from '../components/NewsCard'

  export default {
    components: {
      'news-card': NewsCard
    }
  }
</script>

I always get 404 for the image.

But if i put directly the image url in the NewsCard.vue everything works fine.

The app structure:

src
---assets
------image.png
---components
------NewsCard.vue
---pages
------HomePage.vue

Vuejs: 1.0.17

[nirazul]

On initial rendering, before vuejs got a chance to even render your code, the browser sees this:

<img src="{{ url }}" />

The browser then tries to load {{ url }} and fails with 404.
You need to use the new attr syntax (vue 1.0):

<!-- verbose -->
<img v-bind:src="url" />

<!-- shorthand -->
<img :src="url" />

Please see the documentation for details.

[vinhtq]

@nirazul Thank for replying

I tried but i did not work out. Here is the sample test I made:
https://dl.dropboxusercontent.com/u/25910983/test.zip

[nirazul]

could you translate this in a codepen?
i've found one here that does a similar thing: http://codepen.io/anon/pen/xVYqVZ?editors=101

[vinhtq]

The problem is with the local images not the online ones.

I tried to use online image with my example. Everything is fine!

I cannot load local images. So i cannot do it in online editor!

[hlawuleka]

@nirazul, Thanks a lot!!

[elmeryang]

Is there a way to solve this local image issue yet? I am also experiencing the same problem as @vinhtq

[cschweda]

+1

Same issue. Local images in /assets/ directory aren't loading.

Using the webpack template from vue-cli. Using v-bind:src with the img tag.

I ended up solving this by putting the images in the /static/ directory. Worked fine. But I'm curious why the assets path (./assets/img/ ...) won't display the image. Is it because I'm using an /img/ subdirectory in assets?

EDIT: the Vue 'V' loads fine from /assets/ with a non-dynamic path (./assets/logo.png).

[elmeryang]

@cschweda, Thanks a lot!

[agaripian]

I am having the same issue as @cschweda the images inside /assets/images/ aren't loading for me. Did anyone figure out why?

[chandmk]

@agaripian @cschweda

When you have rooted path (staring with /), are you expecting the assets folder to be present under your dist folder?

I think the behavior you are noticing is because assets folder is relative to src folder and vue-loader copies the images under assets to dist folder applying webpack config rules.