Vue之图片文件的引用

一、img标签引用图片

1.静态绑定src属性

<img src="../../../images/khhx/create_import.png"/>

2.动态绑定src属性，将图片路径放在Vue的data中

<img :src="img1"/>

export default {
  name: 'userClustering',
  components: {},
  data() {
    return {
      img1: require("../../../images/khhx/create_import.png"),
  },
}

扩展：判断图片是否存在，不存在时用默认图片

<img :src="img1 ? img1 : require('../../../images/khhx/create_import.png')"/>

export default {
  name: 'userClustering',
  components: {},
  data() {
    return {
      img1: require("../../../images/khhx/create_import.png"),
  },
}

3.引入图片模块

import png1 from "../../../images/khhx/create_import.png";

export default {
  name: 'userClustering',
  components: {},
  data() {
    return {
      png1: png1,
    }
  },

  created() {},
  mounted() {},

  methods: {}
}

<img :src="png1"/>

二、div标签背景引用图片

1.通过class引入图片

<style>
.testBackground {
  width: 64px;
  height: 64px;
  background: url('../../../images/khhx/create_import.png') center top no-repeat
}
</style>

<div class="testBackground"></div>

2.通过style动态绑定图片

export default {
  name: 'userClustering',
  components: {},
  data() {
    return {
      backgroundImage: {
        background: "url(" + require("../../../images/khhx/create_import.png") + ")",
       },
    }
  },

  created() {},
  mounted() {},

  methods: {}
}

<div style="width: 64px;height: 64px" :style="backgroundImage"></div>

扩展：:style也可写成数组格式，如下

<div :style="[backgroundImage,{height: '64px',width: '64px'}]"></div>