uni-app-x元素style动态背景图片踩坑

小程序：uni-app-x元素style动态背景图片踩坑

使用动态 backgroundImage 绑定本地静态资源图片时，在微信开发者工具/模拟器中正常显示，但在真机（微信小程序）中无法显示。

1.图片链接

tsx 复制代码

// 图标
export const ELECTRICITY = {
	// 已充值
	PAYOK: 'https:/xxxxxxxxxx.png',
	// 已退款
	HASREFUND: '/static/electricity/hasrefund.png',
}

2.代码复现示例

如果运行到真机编辑后的链接为 /static/electricity/hasrefund.png 背景图片会识别失败必须签名加. 编译为./static/electricity/hasrefund.png 才能成功

vue 复制代码

<template >
	<view :style="{ backgroundImage: `url(${isHttp(getCardBg(orderStatus))})` }"  class="card">
</view>
</template>

<script setup >
	import { ELECTRICITY } from '@/constants/images.uts';
	import { ref } from 'vue'
	const devtools = ref(false);
    const orderStatus = ref(5);

	// 获取订单背景
	const getCardBg = (status : number) => {
		if (status === 5) {
			return ELECTRICITY.PAYOK
		}else if (status === 11) {
			return ELECTRICITY.HASREFUND
	}

	// 判断图片是否为http开头
	const isHttp = (url : string) => {
		if (url.startsWith('http')) {
			return url;
		}
		// 微信开发工具运行不加.
		return !devtools.value ? `.${url}` : url
	
	}
	onShow(()=>{
		uni.getSystemInfo({
			success: (res) => {
				console.log(res)
				devtools.value = res?.brand === 'devtools'
			}
		})
	})

</script>