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.

[cschweda]

So you're saying, it'll copy logo.png because it's in /assets/ -- but if I
have a subfolder under /assets/ (/assets/img/, for example) -- it won't copy that
(and that's why I'm getting the 404)?

Should I explicitly tell Webpack to copy any subfolder under assets?
Something like:

new CopyWebpackPlugin([
{ from: './assets/img/', to: './assets/img/' },
])

(Not sure if that's the right syntax)

[chandmk]

In the webpack rules for file-loader module

 {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader?name=img/[name].[ext]?[hash]',
 }

And in your .vue file

<img src="./assets/img/logo.png">

[cschweda]

Awesome. Thank you!

On Mon, Nov 14, 2016 at 5:02 PM, chandmk notifications@github.com wrote:

In the webpack rules for file-loader module

{
test: /.(png|jpg|gif|svg)$/,
loader: 'file-loader?name=img/[name].[ext]?[hash]',
}

And in your .vue file

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#202 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAlZkePauZcEE0XlfVTxPJTiqhMKOACDks5q-OiagaJpZM4FHGId
.

[ralyodio]

this does not work. I still get a 404:

    <img :src="defaultImage">

    data() {
      return {
        defaultImage: '../assets/icon-disabled.svg'
      };
    },

Had to move to /static for it to work

[gordianknotC]

for anyone still encountered dynamic loading issue with webpack, could be helpful to take a look at following links:

• Loading static and dynamic images with Webpack
  https://medium.com/@bogdan_plieshka/loading-static-and-dynamic-images-with-webpack-8a933e82cb1e

• require.context
  https://webpack.github.io/docs/context.html

[vsg24]

Any nice workarounds for this?? I don't want to mess with require

[samuelhmorgan]

Thanks @nirazul - works fine for me

[Hidejec]

Thanks @chovy !

[sculpt0r]

Sorry for reArchive this, but this stack is helping a lot with one function, and nothing with vue config change: http://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working

[jh-thank-you]

@calemb,

Thank you, after days of searching I came across your post. This solution worked for me, I am also referencing this discussion and your link in an issue I filed : vuejs/vue-loader#814

[nagisa1993]

Writing a method doesn't work for me. Instead, try importing img in JS, this works for me. See this issue

[ericbehughes]

this is way too complicated for nothing wow.

[latovicalmin]

data () { return { iconTestPath: require('../../assets/images/icons/testImage.svg') } }

<img :src="iconTestPath"

[arronhunt]

@latovicalmin Using require in data gives a Unexpected require() error

[pankaja-shree]

This worked for me -
In your template:
<img :src = "product.img" />

While giving the path in your data, give the full path from your project root folder -

product: {
'name: 'My image',
'img': './src/assets/img1.jpg'
}

[anicarrr]

Importing the image works like a charm.

import Pic from "@/assets/image.png"

and then in your HTML:

<img :src="Pic" />

[sem4phor]

This should work for you guys

ES2015 Style:

<div :style="{ backgroundImage: url(`${image}`) }"></div>

Or without ES2015:

<div :style="{ backgroundImage: 'url(' + image + ')' }"></div>

[mpopv]

@stablestorage the image path in your first example needs to be wrapped in backticks to interpolate with the ${expression} syntax, like this:

<div :style="{ backgroundImage: url(`${image}`) }">

[VinceXie]

@latovicalmin it works for me

[tsauvajon]

I've had success with @latovicalmin 's solution.

<img :src="url" />

url () {
  const url = require(`@/assets/${this.article.code}.jpg`)
  return url
}

While this worked in development, in production all my links were broken.

It tried to fetch http://serverurl/static/img/8290002.659053a.jpg, for exemple, while the application is hosted at http://serverurl/websitename/, so the actual link was http://serverurl/websitename/static/img/8290002.659053a.jpg

To fix this issue, I had to drop a script tag in my html page (served by IIS), to include the actual website root, like this (in cshtml) :

<script>
    var ROOT = '@Url.Content("~/")';
</script>

and then fix my url resolving method like this :

url () {
  const url = require(`@/assets/${this.article.code}.jpg`)
  return ROOT + url.substr(1)
}

Maybe it would be nice to use the actual application's root instead of / ?

[menemelkatan]

Worked with me
<img :src="image">

data() {
  return {
    image: require('../assets/img/a1.jpg')
  }
}

[Muzho]

Thanks Nirazul, it works just fine.

[ahmetsulek]

<img :src="require(`@/assets/image-${imageNum}.png`)">

[zoutepopcorn]

This is way for me, its working fine for me..

<div class="page" v-for="pic in pics">
       <img class="landscape" :src="`/static/img/${pic}`">
</div>