vue项目中加入图片和背景图：img、background-image

一、背景图

第一种方式：推荐使用

<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

  }

第二种方式：

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

第三种方式：

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

<script> import logo from '@/assets/images/logo.png' export default {

data() {

return {

imgData: logo

}

}

}

</script>

二、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="">
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/qq_49097495/article/details/131622042