Vue 动态设置图片路径

  大多数情况vue项目中组件是需要相互引用的，父组件引用子组件，子组件引用父组件，已达到组件重用的目的

  本次记录的是父组件引用子组件，img标签定义在多个子组件中，不同或相同的父组件引用同一个子组件，从而设置不同的图片路径

1、子组件实现

<div class="customerIntroduce-left">
        <!-- 父组件传入图片路径 -->
        <img :src=image_path />
</div>

export default {

  props: ["image_path"], //props向下传递数据给子组件,此处注意命名规范 统一

  data() {

      return {

      };

  },

 

};

2、父组件实现

<template>

  <div>

<CustomerIntroduce id="introduction" :image_path="image_path"/>
</div>

</template>

import CustomerIntroduce from "@xxx/xxx/customerIntroduce.vue";  // 引入子组件

import img from "@/xxx/images/xxxx.png"; 引入图片对象

 

export default {

  components: {

    CustomerIntroduce

  

  },

  data() {

    return {

      image_path: hcis_logo, //使用图片对象路径赋值

    };

  },