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