How to pass through prop containing image path in Vue?

Question

I am trying to display an image in Vue template using a prop that i passed through in my App.vue file.

App.vue:

<Header image='../assets/logo.png' />

Header.vue:

<template>
  <div class="div-box">
    <img :src={image} alt="Vue logo" />
  </div>
</template>

<script>
export default {
  name: "Header",
  props: ["image"],
};
</script> 

Thanks in advance!

Answer 1

You have to explicitly load the image "module":

<Header :image="require('../assets/logo.png')" />

vue-loader does this automatically for you for things like <img>, but if you've made your own component then you need to do it yourself.