如何在Vue中通过包含图像路径的道具？

Question

我正在尝试使用我在 App.vue 文件中传递的道具在 Vue 模板中显示图像。

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> 

提前致谢！

Answer 1

您必须显式加载图像“模块”：

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

vue-loader 为 automatically 为您执行 <img> 之类的操作，但如果您已经制作了自己的组件，那么您需要自己做。