运行到小程序的时候编译失败

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

这个错误是因为微信小程序不支持在 :style 中使用 background-image 属性，尤其是包含模板字符串拼接路径的写法。

原因分析

小程序端的样式系统对 CSS 的支持有限，background-image 这种写法在小程序中不被识别，尤其是动态拼接路径的方式。这是小程序平台的限制，不是 uni-app 的问题。

解决方案

方案一：使用 <image> 标签替代背景图（推荐）

将背景图改为使用 <image> 组件，配合绝对定位实现类似背景图的效果：

<view class="audioManager-pager">  
  <view class="audioManager-pager flex column">  
    <!-- 使用 image 标签作为背景 -->  
    <image   
      class="bg-image"   
      :src="imgPath + '/th_bg@2x.png'"   
      mode="aspectFill"  
    />  
    <!-- 其他内容放在这里 -->  
    <view class="content">  
      <!-- 你的内容 -->  
    </view>  
  </view>  
</view>

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

.audioManager-pager {  
  position: relative;  
  width: 100%;  
  height: 100%;  
}  

.bg-image {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  z-index: 0;  
}  

.content {  
  position: relative;  
  z-index: 1;  
}

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

方案二：使用静态样式类

如果背景图路径是固定的，可以直接在 CSS 中定义：

/* 在 style 中定义 */  
.bg-style {  
  background-image: url('~@/static/th_bg@2x.png');  
  background-size: 100% 100%;  
  background-repeat: no-repeat;  
  background-position: center center;  
}

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

<view class="audioManager-pager flex column bg-style">  
  <!-- 内容 -->  
</view>

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

方案三：条件编译

如果只需要在 App 端使用背景图，可以使用条件编译：

<!-- #ifdef APP-PLUS -->  
<view class="audioManager-pager flex column" :style="`background-image: url(${imgPath}/th_bg@2x.png);background-size: 100% 100%;background-repeat: no-repeat;background-position: center center;`">  
<!-- #endif -->  
<!-- #ifdef MP-WEIXIN -->  
<view class="audioManager-pager flex column">  
  <image class="bg-image" :src="imgPath + '/th_bg@2x.png'" mode="aspectFill" />  
<!-- #endif -->  
  <!-- 内容 -->  
</view>

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

注意事项

• 小程序中 background-image 只能使用网络图片或 base64 格式，且不支持动态拼接
• <image> 组件是小程序推荐的图片展示方式，性能更好
• 如果图片需要覆盖整个容器，记得设置 mode="aspectFill" 和容器的宽高