1.小于40kb的直接这样设置,
2.图片大于40k可以自己转化
转化base64
生成图片base64字符串,拷贝到项目中,代码如下
<template>
<view class="container" :style="{backgroundSize: 'cover'}">
</view>
</template>
<script>
</script>
<style >
.container{
width:690rpx;
height:1160rpx;
margin: 30rpx 30rpx;
background-image:url('base64字符串拷贝到这里');
}
</style>
注意: 至于下面这种很多文章介绍的方法,小程序和h5有效,但是手机真机上却不显示,所以官方推荐的base64方法才是通用的解决方法。
<template>
<view class="index" :style="{backgroundImage:`url(${indexBackgroundImage})`,backgroundSize: 'cover'}">
<!--你的内容-->
</view>
</template>
<script>
import indexBackgroundImage from "@/static/img/account_index.jpg"
export default {
data() {
return {
indexBackgroundImage:indexBackgroundImage
}
},
methods: {
}
}
</script>
<style lang="scss" scoped="">
</style>
参考:
https://uniapp.dcloud.io/frame?id=背景图片
https://blog.csdn.net/weixin_43343144/article/details/90300788