Webpack: Can't load images using data binding

Created on 22 Feb 2017  路  2Comments  路  Source: vuejs-templates/webpack

When i'm using data binding for load images doesn't work.

Example:

// In App.vue ( Doesn't work)

<template>
  <img :src="img">
</template>

<script>
export default {
  data() {
    img: './assets/image.png'
  }
}
</script>

But, if I do this, it work

In App.vue again

<template>
  <img src="./assets/image.png">
</template>

<script>
export default {
  data() {
    ...
    ...
    ...
  }
}
</script>

Most helpful comment

The bundler can not detect the dependency this way. Instead you should do:
``` js
data() {
return {
img: require('./assets/image.png'),
};
},

All 2 comments

The bundler can not detect the dependency this way. Instead you should do:
``` js
data() {
return {
img: require('./assets/image.png'),
};
},

@simplesmiler Thanks so much

Was this page helpful?
0 / 5 - 0 ratings