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="">