小程序页面添加图片,代码怎么写
时间: 2024-10-23 14:17:47 浏览: 19
在微信小程序中添加图片,通常有两种方式:
1. 在`index.wxml`(XML部分)中,你可以直接嵌入`image`标签,比如要显示一张图片资源`img.png`:
```html
<image src="file:///data/img.png" class="good-hot"></image>
```
这里`.good-hot`是CSS类名,可以根据需求设置样式。
2. 使用懒加载(lazy-load)技术时,如你提到的,可以在CSS中设置一个高度极大的容器来触发图片的延迟加载。例如,在`index.scss`中定义一个高度很大的 `.good-hot` 类:
```css
.good-hot {
height: 5000px; /* 设置一个非常高的初始高度以触发懒加载 */
overflow: hidden;
}
```
然后在`index.wxss`(如果项目支持的话,通常使用WXML的CSS版本)中重置整个页面的高度并设置背景色,以便图片可以正常显示:
```css
page {
height: 100vh; /* 设置页面高度 */
background-color: #efefef !important; /* 设置背景颜色 */
}
```
这样,当用户滚动到图片位置时,图片才会开始加载,提高了用户体验。
阅读全文