17

I have in my vue webpack script the following:

<script>
  export default {
    data () {
      return {
        repos: [
          {name: 'test1', src: '../assets/logo.png'},
          {name: 'test2', src: '../assets/underscore.png'},
           ...
        ]
      }
    }
  }
</script>

And then in my html, I'm trying to bind the local src element to an img but I can't get it to work. Here is what my html looks like:

<div v-for="repo in repos" :key="repo.name">
  <img :src="repo.src" />
</div>

It works fine when my img source is not data-bound such as this:

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

Why won't my local images load if they are data bound in Vue?

Here is what my directory looks like:

enter image description here

rockzombie2
  • 2,835
  • 4
  • 16
  • 20
  • When you inspect the element, what is in `src`? – Roy J Feb 18 '18 at 02:12
  • ../assets/logo.png – rockzombie2 Feb 18 '18 at 02:22
  • Is the repo name unique? You show "test" twice here, and you're using it for `:key`. – Roy J Feb 18 '18 at 02:29
  • That was a typo I just fixed. The repo names are unique. I was using an id before but for the sake of brevity in this example I changed it. – rockzombie2 Feb 18 '18 at 02:40
  • You should post an answer details how you fixed problem. That way if someone else is stuck, they can get unstuck. – James A Mohler Feb 18 '18 at 02:42
  • If the `src` attribute is set correctly when you inspect the element, then the binding is working correctly. There should be no difference to the DOM how it got set. – Roy J Feb 18 '18 at 02:48
  • Maybe, but the image isn't displaying still. It's just showing the broken image link. I think it needs to convert the path to base 64 or something like that to find it after the page has been built. – rockzombie2 Feb 18 '18 at 03:12
  • You need to `require` when you're getting the string from script. I posted an answer. – Bill Criswell Feb 18 '18 at 03:14

3 Answers3

30

If you're using vue-cli you have to remember that everything is processed as a module, even images. You'd need to use require if the path is relative in JS, like this:

{ name: 'test1', src: require('../assets/logo.png') }

You can find a lot more details about this here: http://vuejs-templates.github.io/webpack/static.html

Bill Criswell
  • 32,161
  • 7
  • 75
  • 66
9

simply for binding img src to data, just require the file address :

<img v-bind:src="require('../image-address/' + image data)" />

example below shows ../assets/logo.png :

<template>
          <img v-bind:src="require('../assets/' + img)" />
</template>

<script>
export default {
  data: function() {
    return {
      img: "logo.png"
    };
  }
};
</script>
sina
  • 2,103
  • 1
  • 19
  • 26
0

Also, vite required a different method to include source file in like a prop.

The most common way is to use following construction :

{ name: 'test1', img: 'new URL(`@/assets/logo.png`, import.meta.url).href' }
Samuel RIGAUD
  • 623
  • 7
  • 21
WAF
  • 1
  • 1