小程序用css外部文件设置本地背景图片会获取不到,可以通过下面两种方法设置背景图片:
一、通过js文件设置背景图片
1、在js文件中引入背景图片
import HomeBg from '@assets/images/home-bg.jpg'
2、在需要设置背景图片的View上面设置样式
<View style={{backgroundImage:`url(${HomeBg})`}}>
...
</View>
二、通过图片绝对定位设置背景图片
js文件:
<Image className='home-bg'/>
<View className='home-content'>
...
</View>
scss文件:
.home-bg {
position: absolute;
z-index: 1;
width: 100vw;
height: 100vh;
background: url('../../assets/images/home-bg.jpg') no-repeat;
background-size: cover;
}
.home-content {
position: relative;
z-index: 2;
}