CSS——scss中动态引入背景图

dbt@L

于 2024-02-29 06:24:39 发布

阅读量496

点赞数 3

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_43201350/article/details/136360414

版权

CSS 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

方式一

    <view class="box" >内容</view>

data(){
  return {
  }
}

<style lang="scss" scoped>
// $img:'@/static/demo.png';  // 本地图片
$img:'https://abc.com/demo.png'; // 在线图片
.box {
    width: 30rpx;
    height: 30rpx;
    background-image: url($img);
  }
  </style>

方式二

    <view class="box" :style="{ backgroundImage: 'url(' + img + ')' }">内容</view>

data(){
  return {
          // 本地图片
          img:require('@/static/demo.png'), 
          // 在线图片
          // img:'https://abc.com/demo.png',
  }
}