VUE中图片和背景图引用（img和background-image）

VUE中图片和背景图引用（img和background-image）

一、背景图引入

1.第一种方式

<div class="bgimg"></div>

.bgimg{
    width: 150px;
    height: 60px;
    /*以下两种路径方式都可以*/
    /*background-image: url('../../../../assets/images/logo.png');*/
    background-image: url('~@/assets/images/logo.png');
    background-size: cover
  }

2.第二种方式

<div :style="{backgroundImage: 'url(' + require('@/assets/images/logo.png') + ')' }"></div>

3.第三种方式

<div :style="{backgroundImage: 'url(' + imgData + ')' }"></div>

<script>
import logo from '@/assets/images/logo.png'
export default {
  data() {
    return {
      imgData: logo 
    }
  }
}
</script>

问题分析

	<div style="background-image: url('../../../../assets/images/logo.png');"></div>
  <!--直接使用上面这种内联样式：style="background-image: url('../../../../assets/images/logo.png')的方式引入背景图时，
    由于url('../../../../assets/images/logo.png')中的静态路径不会被编译处理，所以在项目运行起来或者项目打包编译之后，
    按照此处../../../../assets/images/logo.png路径无法找到图片。
    如果图片放在static路径下，则可以直接这样引入，引入static下的文件不会被打包编译"-->
    <div style="background-image: url('static/logo.png');"></div>

二、img引入图片

 	<!--第一种-->
    <img src="~@/assets/images/logo.png" alt="">
    <img src="../../../../assets/images/logo.png" alt="">
    <!--第二种-->
    <img :src="imgData" alt="">
    <!--第三种-->
    <img :src="require('../../../../assets/images/logo.png')" alt="">