uni-app 设置背景图在手机中无效
uni-app 设置背景图在手机中无效
·
如下写法在微信开发者工具中显示正常,但在真机调试下,手机端背景图并未显示
<template>
<view :style="{background:'url('+imageBgURL+') 100% no-repeat;'}">
<text>内容文字</text>
</view>
</template>
<script>
export default {
data() {
return {
imageBgURL:'../../static/imageBg.png'
};
}
}
</script>
解决方案如下:
1,将图片转为base64编码
2,将图片文件上传至服务器,使用网络地址
3,使用image标签替代,如
<view>
<image src="../static/textBg.png" class="textBg"></image>
<text> 文本内容</text>
</view>
.textBg{
height: 114rpx;
width: 620rpx;
position: absolute;
z-index: -1;
}
更多推荐
已为社区贡献6条内容
所有评论(0)