展示图片的方法一般有两种:
1.css 通过background属性加载图片(适用于本地图片);
.img {
100px;
height: 100px;
background: url('./test.png');
background-size: 100%;
}
html片段:
<div class="img"></div>
微信小程序wxml片段:<view class="img"></view>
2.专用图片标签展示(适用于本地、线上);
h5: <img src="./test.png"></img>
微信小程序:<image src="./test.png" />
PS:
1. css方法:
h5和微信小程序如果不设置高度,图片不显示;如果只设置高度,宽度按100%显示。
2.专用标签:
- h5,不做宽高设置,默认显示图片的原始宽高,若只设置宽度,高度自适应;若只设置高度,展示图片原始宽高;
- 微信小程序:
若不设置图片宽高,默认按mode="scaleToFill"处理,图片会填充整个image默认宽高;
若只设置宽度/高度,默认mode值不改变,高度/宽度为image默认高度/宽度;
若要保持宽度不变、高度自适应,则应给定一个宽度值并将mode值改为‘widthFix’;