Reputation: 2913
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:
Upvotes: 17
Views: 29468
Reputation: 1
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' }
Upvotes: 0
Reputation: 2381
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>
Upvotes: 9
Reputation: 32921
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
Upvotes: 30