pages/discover/discover.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签。
时间: 2024-01-12 20:02:19 浏览: 165
是的,微信小程序中,WXSS样式文件中引用本地图片的方式是有限制的。具体来说,WXSS样式文件中使用`background-image`属性引用本地图片时,只能引用项目目录下的图片文件,并且路径必须使用相对路径。
如果想要在WXSS文件中引用其他位置的图片,可以使用以下方式之一:
1. 使用网络图片:将图片上传到云存储或者其他服务器,并通过网络地址引用。
```css
.container {
background-image: url("https://example.com/images/bg.jpg");
background-size: cover;
}
```
2. 使用base64编码:将图片转换为base64编码,并在样式文件中直接引用编码后的字符串。
```css
.container {
background-image: url("data:image/png;base64,iVBORw0KGg...");
background-size: cover;
}
```
3. 使用`<image/>`标签:在WXML文件中使用`<image/>`标签,直接引用图片文件,并设置样式。
```html
<view class="container">
<image src="/images/bg.jpg" class="bg"></image>
<view class="content">这是内容</view>
</view>
```
```css
.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
```
其中,第三种方式是比较推荐的,因为它不会影响样式的渲染效率,且可以灵活控制图片的显示效果。
阅读全文