uniapp 在u-popup 里设置背景图片的方式

在uniapp中使用组件时,在组件内部直接通过style属性设置backgroundImage,可能会遇到错误,因为组件的内部结构可能阻止了直接样式的生效。微信小程序不支持相对路径(真机不支持,开发工具支持),并且大图片推荐使用网络地址 。

为了在中设置背景图片,有以下几种方法:

使用网络图片地址:
直接在的style属性中使用它:

<uni-popup style="background-image: url('https://吃糖以后更甜-image-url.com/image.png');"></uni-popup>

使用内联样式:

<template>
  <uni-popup :style="{ 'background-image': 'url(' + imageUrl + ')' }"></uni-popup>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      imageUrl: 'https://吃糖以后更甜-image-url.com/image.png' // 图片URL
    };
  }
};
</script>