【快速文档】image标签,小程序中的引入图片

本文档详细介绍了小程序中`<image>`标签的使用,重点关注`src`、`mode`等重要参数,以及`lazy-load`和`show-menu-by-longpress`等特性。建议主要使用`widthFix`模式,对于长按保存图片的需求,可通过设置`show-menu-by-longpress`实现。同时提醒开发者注意,`<image>`标签需闭合,且与`<navigator>`的`url`属性区别开来。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

重要参数

src 填写图片地址,非常重要,没有图片地址就没有图片

mode 图片模式

1,widthFix,宽度不变,高度自适应,总体保持宽高比不变

2,heightFix,高度不变,宽度自适应,总体保持宽高比不变

3,aspectFit,按照图片的长边进行缩放,保证整个图片最终可以显示

4,aspectFill,按照图片的短边进行缩放,只保证短边可以显示

5,scaleToFill,不进行缩放,随便拉伸,填满为止

lazy-load 懒加载,就是距离这个图片还很远就先不加载,提高性能

show-menu-by-longpress 长按图片可以保存图片

binderror 绑定错误

bindload 绑定加载完成

注意事项

1, 图片模式太多了,不纠结的话,就主要用第一个,也就是widthFix,一般最好用,其他的,不行就都试一试,没有必要去理解它到底是干什么的。

2,懒加载你需要拖动刷新的话,可能有点用,图片不多没用

3,不能扫码怎么办,那你就让长按保存图片,然后让用保存的图片扫码就行了。其实,截图了以后再扫码也差不多。

4,特别强调:小程序中的图片标签是image,不是img,如果你还没习惯使用image很可能错误的写成img,然后就会发现没效果。

5,特别强调2:image的图片标签,本来是一个可以单标签解决的事情,但是傲慢的小程序设计人员认为,每个标签都应该闭合,不允许使用未闭合标签,所以image一般也要写两个,包括一个闭合的</image>,实际上这个没用。

6,特别强调3:image标签填写的是src,navigator标签填写的是url,不要弄混了,如果搞错了,在这里使用url的话,会导致图片不好用。

简单使用

图片标签也没什么困难的,所以,我们只强调一个最重要的点

<!-- 只有一个单标签,这样是不行的,无法通过 -->
<image src="/这里填写的是/图片的地址/哈哈哈哈">

<!-- 常规的双标签,可以 -->
<image src="/这里填写的是/图片的地址/哈哈哈哈"></image>

<!-- 特殊写法的闭合标签,可以 -->
<image src="/这里填写的是/图片的地址/哈哈哈哈" />

<!-- 在两个标签里面写字,可以,但是没什么用 -->
<image src="/这里填写的是/图片的地址/哈哈哈哈">你好啊</image>

因此,我们可以得到一个非常重要的信息,只要你的标签是闭合的,就可以,至于是怎么闭合的,这不重要。

<image src="/这里是可以长按保存的图片/哈哈哈哈" show-menu-by-longpress></image>

如之前重要参数中已经提到过的,只要加上show-menu-by-longpress,就可以长按保存了。

回到小程序快速文档-吴茗

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值