vue css 将后端返回的图片设置为背景图片

354 阅读1分钟

需求:需要将后台设置logo图弄成背景图,但是图片是后台返给我的数据

实现效果图:

image.png image.png

    <view class="uv-my-warp" :style="{backgroundImage:'url('+memberGradeInfo.grade.grade_bg+')'}"> 
    <view>
//样式中可以设置默认的背景图
<style lang="scss">
.uv-my-warp {
  width: 100%;
  background: url("https://oss.lanlnk.com/gxjtbbc/default/202306/21/kafWN1V43OOLLLhFKzuDh8R03b3dDcjFoiMZoY5Y.png")
    center center no-repeat;
  background-size: 100% 550rpx;
  height: 550rpx; 
  padding-right: 20rpx; 
}
<style>

**注:1.memberGradeInfo.grade.grade_bg是后台返回的用户头像的图片

       2.backgroundImage使用的是驼峰命名,不是background-image**

{backgroundImage:'url('+memberGradeInfo.grade.grade_bg+')'}"通过这行代码就能实现其效果。