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

Posted 2023-02-23

【中文标题】如何将图像位置传递给 Vue 中的子组件？

【英文标题】：How do I pass an image location to a child component in 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 传递给您的组件。然后你可以像这样使用它：$publicPathmy-image.png">

啊，谢谢！我终于让它工作了！我必须在我的export default 中添加data () return publicPath: process.env.BASE_URL，然后它就起作用了！谢谢！

【参考方案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" />