如何在 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> 之类的事情，但如果您已经制作了自己的组件，那么您需要自己制作。

如何在 Vue 中传递包含图像路径的道具？

How to pass through prop containing image path in Vue?

vue.js

vue-component

vuejs2