Vue父组件如何给子组件传递图片属性？为什么父组件传递的图片子组件接收不到？

之前再写代码的时候，有一个非常大的问题，就是我明明将图片的url传递给了子组件，为什么子组件接收不到呢，图片无法在子组件中显示，今天终于得到了解答。

接收不到值的根本原因就在于图片是静态资源，所以与单一的传递值、对象不同，要先进行特殊处理或导入才能传递。

1、require包裹

2、import导入 

一、父组件：

<template>
  <!-- 将图片数据进行传递
  1、url必须是相对于使用方的相对路径
  2、使用require来包裹
  3、url属性值用v-bind或用 ：简写
   -->
  
  <!- 1、直接通过写参数的形式传递，此时要用require包裹 -->
  <swipers :url="require('./assets/2.png')" /> 

  <!-- 2、通过变量的方式传递图片:此时要先将图片用import的方式导入到该文件 -->
  <swipers :url="img3"/>
   
  <!- 3、传递网络图片 -->
  <swipers :url="img4"/>
</template>

<script>
//导入自定义组件
import swiper from "./components/swiper.vue";

//导入图片的url地址
import img3 from "@/assets/3.png"; //@指的是当前目录的根目录,即src

//传递网络图片:
const img4 ="网络图片地址";

export default {
  name: "App",
  components: {
    swipers: swiper, //注册组件,标签叫什么还是从这决定的
  },

  setup() {
    return {
      img3, //因为要绑定,所以要在setup函数注册
      img4, //注册网络图片地址
    };
  },
};
</script>

<style>
</style>

 二、子组件：

<template>
  <img :src="url" /> 
</template>
<script>
export default {
  name: "swiper",
  // props: ["url"],  //只有一个值,并且无约束
  //也可以接收一个对象,并且对其进行约束
  props: {
    url: {
      //只能是String类型,并且默认值是''
      type: String,
      default: "",
    },
  },

  setup(props, context) {
    //获取url的值
    console.log(props.url);

    return {
    };
  },
};
</script>
<style>
</style>