如何将图像位置传递给 Vue 中的子组件?

Question

由于某种原因，我无法显示我的图像。图像的路径应发送到组件并在那里呈现。但它就是不渲染。我相信我正在使用 Vue-CLI 如果有帮助的话。

这是我的文件夹结构：

src
| App.vue
| bulbasaur.png
| /components
| Pokemon.vue

App.vue

<template>
<div id="app">
<Pokemon location="./bulbasaur.png"/>
</div>
</template>
<script>
import Pokemon from './components/Pokemon.vue'
export default {
name: "app",
components: {
Pokemon
}
};
</script>
<style>
</style>

口袋妖怪.vue

<template>
<div>
<img :src="`${location}`" />
</div>
</template>
<script>
export default {
name: 'Pokemon',
props: {
location: String
}
};
</script>
<style scoped>
</style>

Answer 1

首先，在子组件中创建一个图像道具：

props: {
image: {
type: String,
default: ""
}
}
...

在子组件中添加 img 标记：

<img :src="image" />

在父组件中导入映像：

import MyImage from '../path/to/my/image';

对于 Vue3，请确保将加载的映像提供给模板：

setup() {
return {
MyImage
};
}

对于 Vue2，你可以将其添加到你的数据部分：

data() {
return {
MyImage: MyImage
};
}

然后只需将图像传递给您的孩子道具：

<child :image="MyImage" />