I am passing imageSrc from App.vue to HelloWorld.vue, but the image doesn't show up.
App.vue
<HelloWorld imageSrc="./assets/logo.png" />
HelloWORLD.vue
<template>
<div class="hello">
<img :src="imageSrc" alt="img" />
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
imageSrc: String,
},
};
</script>
<style scoped>
</style>
CodeSandbox:
https://codesandbox.io/s/cocky-hofstadter-bomkf?file=/src/components/HelloWorld.vue:0-432
This will help you and it's working:
<template>
<div id="app">
<HelloWorld :imageSrc="logo" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
import Logo from "./assets/logo.png";
export default {
name: "App",
components: {
HelloWorld,
},
data: function () {
return {
logo: Logo,
};
},
};
</script>
Working Sandbox: https://codesandbox.io/s/dark-haze-z3b7m?file=/src/App.vue:0-331
Move your assets folder into public. It should work fine.
Here's the Demo link
Static assets placed in the public directory and referenced via absolute paths. These assets will simply be copied and not go through webpack.
To access the static assets with absolute path, you should keep assets in public folder.
Read the documentation for more info.