vue中设置背景图片的方式

最新推荐文章于 2025-08-28 15:17:18 发布

原创最新推荐文章于 2025-08-28 15:17:18 发布 · 2.6w 阅读

84 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue #js

本文介绍如何在Vue项目中设置背景图片，包括直接设置背景图片的方法和动态改变背景图片的技巧。详细步骤涵盖从图片导入到样式应用的全过程。

vue中设置背景图片

直接设置背景图片
动态设置背景图片

直接设置背景图片

1、在data中声明背景图片相关配置

export default {
  data () {
    return {
      // 顶部导航背景图片配置
      background: {
      	// 背景图片地址
        backgroundImage: 'url(' + require('../../../static/img/person/temp1.png') + ')',
        // 背景图片是否重复
        backgroundRepeat: 'no-repeat',
        // 背景图片大小
        backgroundSize: 'cover',
        // 背景颜色
        backgroundColor: '#000',
        // 背景图片位置
        backgroundPosition: 'center top'
      }
    }
  }
}

2、在vue中引用

 <div :style="background" class="bgBackground">
 </div>

3、设置背景图片的宽高

.bgBackground{
width:100%;
height:150;
}

动态设置背景图片

1、在data中声明背景图片相关配置和切换背景图片的条件

<script>
export default {
  data () {
    return {
      lessonActive: true, // 我的课程激活
      lessonDeactive: false, // 我的课程未被激活
      initLesson: { // 我的课程未被激活
        backgroundImage: 'url(' + require('../../../static/img/person/play.png') + ')'
      },
      activeLesson: { // 我的课程激活
        backgroundImage: 'url(' + require('../../../static/img/person/play1.png') + ')'
      }
  }
}
</script>

2、在vue中引用
判断lessonActive是否为true,为true则显示激活条件下的图片，反之显示未激活下的图片

  <i :style="{backgroundImage:(lessonActive?activeLesson.backgroundImage:initLesson.backgroundImage)}"></i>