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

【问题标题】：How do I pass an image location to a child component in Vue?如何将图像位置传递给 Vue 中的子组件？
【发布时间】：2020-10-11 21:18:12
【问题描述】：

由于某种原因，我无法显示我的图像。图像的路径应该被发送到组件并在那里渲染。但它只是不渲染。如果有帮助，我相信我正在使用 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>

Pokemon.vue

<template>
  <div>
    <img :src="`${location}`" />
  </div>
</template>

<script>
  export default {
    name: 'Pokemon',
    props: {
      location: String
    }
  };
</script>

<style scoped>
</style>

【问题讨论】：

由于图像路径不正确等原因，您是否在控制台或网络选项卡中出现任何错误？
不，没有错误。元素创建为：<img data-v-3848655a="" src="./bulbasaur.png">，但只显示损坏的图像链接。
您可以尝试一次将图像放入public 文件夹，而不是像这样：html-and-static-assets
请完整阅读文档。在模板中，您需要首先将基本 URL 传递给您的组件。然后你可以像这样使用它：${publicPath}my-image.png">
啊，谢谢！我终于让它工作了！我必须在我的export default 中添加data () {return {publicPath: process.env.BASE_URL}，然后它就起作用了！谢谢！

标签： vue.js vue-component vue-cli

【解决方案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" />

【讨论】：