Skip to content
This repository has been archived by the owner. It is now read-only.

img src data binding? #202

Closed
elsodev opened this issue Jun 19, 2015 · 38 comments

Comments

@elsodev
Copy link

commented Jun 19, 2015

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

This comment has been minimized.

Copy link

commented Jun 19, 2015

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

This comment has been minimized.

Copy link
Author

commented Jun 19, 2015

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

@elsodev elsodev closed this Jun 19, 2015

@weilao

This comment has been minimized.

Copy link

commented Oct 15, 2015

Thanks!

@vinhtq

This comment has been minimized.

Copy link

commented Apr 10, 2016

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

This comment has been minimized.

Copy link

commented Apr 10, 2016

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

This comment has been minimized.

Copy link

commented Apr 11, 2016

@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

This comment has been minimized.

Copy link

commented Apr 11, 2016

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

This comment has been minimized.

Copy link

commented Apr 11, 2016

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

This comment has been minimized.

Copy link

commented Jun 28, 2016

@nirazul, Thanks a lot!!

@elmeryang

This comment has been minimized.

Copy link

commented Nov 5, 2016

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

@cschweda

This comment has been minimized.

Copy link

commented Nov 7, 2016

+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

This comment has been minimized.

Copy link

commented Nov 8, 2016

@cschweda, Thanks a lot!

@agaripian

This comment has been minimized.

Copy link

commented Nov 12, 2016

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

@chandmk

This comment has been minimized.

Copy link

commented Nov 14, 2016

@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

This comment has been minimized.

Copy link

commented Nov 14, 2016

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

This comment has been minimized.

Copy link

commented Nov 14, 2016

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

This comment has been minimized.

Copy link

commented Nov 14, 2016

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
.

@chovy

This comment has been minimized.

Copy link

commented Feb 10, 2017

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

@gordianknot1981

This comment has been minimized.

Copy link

commented Apr 1, 2017

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

@VSG24

This comment has been minimized.

Copy link

commented Apr 7, 2017

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

@samuelhmorgan

This comment has been minimized.

Copy link

commented Apr 20, 2017

Thanks @nirazul - works fine for me

@Hidejec

This comment has been minimized.

Copy link

commented Apr 27, 2017

Thanks @chovy !

@Calemb

This comment has been minimized.

Copy link

commented May 2, 2017

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

This comment has been minimized.

Copy link

commented May 25, 2017

@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

This comment has been minimized.

Copy link

commented Jul 13, 2017

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

@ericbehughes

This comment has been minimized.

Copy link

commented Jul 23, 2017

this is way too complicated for nothing wow.

@latovicalmin

This comment has been minimized.

Copy link

commented Jul 24, 2017

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

<img :src="iconTestPath"

@arronhunt

This comment has been minimized.

Copy link

commented Jul 31, 2017

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

@pankaja-shree

This comment has been minimized.

Copy link

commented Aug 3, 2017

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

This comment has been minimized.

Copy link

commented Aug 11, 2017

Importing the image works like a charm.

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

and then in your HTML:

<img :src="Pic" />

@sem4phor

This comment has been minimized.

Copy link

commented Aug 18, 2017

This should work for you guys

ES2015 Style:

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

Or without ES2015:

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

@mpopv

This comment has been minimized.

Copy link

commented Aug 18, 2017

@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

This comment has been minimized.

Copy link

commented Sep 1, 2017

@latovicalmin it works for me

@tsauvajon

This comment has been minimized.

Copy link

commented Sep 19, 2017

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

This comment has been minimized.

Copy link

commented Dec 7, 2017

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

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

This comment has been minimized.

Copy link

commented Jan 2, 2018

Thanks Nirazul, it works just fine.

@ahmetsulek

This comment has been minimized.

Copy link

commented Jan 8, 2018

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

@zoutepopcorn

This comment has been minimized.

Copy link

commented Mar 13, 2018

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>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
You can’t perform that action at this time.