小程序中的image标签

2024-05-21 00:00:37

一.image标签的src属性

小程序代码上传要求在2M以内，因此静态资源比如图片等一般不与代码文件放在一块（因为很容易超出预算）

因此image的src属性不支持相对路径，src的属性值必须是绝对路径

<!-- 以下为错误写法 小程序image标签的src属性不支持相对路径 -->
<image src="../../img/random.jpg"></image><!-- 正确写法 -->
<image src="https://z3.ax1x.com/2021/03/31/ckVNT0.jpg"></image>

除了将图片放在服务器数据库上，还可以将图片上传到图床上，并由图床生成图片的绝对路径

二.image标签的mode属性

基础知识：1）小程序图片默认宽高：320px*240px

2）image标签默认不保持原图片的宽高比自己设置宽高时容易使图片变形

mode常用属性值：1）aspectFit 可以使图片的较长边完整地显现出来

但又不会超出image设置的宽高大小常用于轮播图

2）aspectFill 可以使图片的短边完整地显现出来

设置该值可能看不到完整的较长边较少用

3）widthFix 相当于WEB中只设置宽而不设置高

图片将等比例缩放最常用

4）方向值top、bottom、left、right

top left、top right、bottom left、bottom right

不缩放图片，将图片置于对应的方向上，类似于background-position

当设置的image宽高小于默认宽高时，将对图片进行对应方向上的裁剪

<image mode="aspectFit" src="https://z3.ax1x.com/2021/03/31/ckVNT0.jpg"></image><image mode="aspectFill" src="https://z3.ax1x.com/2021/03/31/ckVNT0.jpg"></image><image mode="widthFix" src="https://z3.ax1x.com/2021/03/31/ckVNT0.jpg"></image><image mode="top | bottom | left | right | top left | top right | bottom left | bottom right" src="https://z3.ax1x.com/2021/03/31/ckVNT0.jpg"></image>

三.image标签的lazy-load属性

小程序中的图片直接支持懒加载（即在加载图片之后会自动保存在缓存中实现节流）

<image lazy-load src="https://z3.ax1x.com/2021/03/31/ckVNT0.jpg"></image>
<!-- 也可以写成lazy-load="{{true}}" -->

小程序中的image标签相关推荐

微信小程序中识别html标签的方法
微信小程序中识别html标签的方法前言 rich-text组件前言在后台接口返回的数据中有些会带有标签,在微信小程序中如何将其直接渲染在页面呢? rich-text组件在微信小程序中有一个组件 ...
小程序中image 图片标签的使用
小程序中image 图片标签的使用(注意这里和html的img的不同) 一. src 指定要加载的图片的路径图片存在默认的宽度和高度 320 * 240 原图大小是 200 * 100 二. mod ...
在微信小程序中识别html标签的方法（wxParse）
在小程序开发中遇到了小程序不支持html标签,这在获取后端提供的"商品详情页面"产生了很大难题,在网上找到了wxParse富文本插件,官方地址:wxParse 详细教程: 1.打开 ...
vue中是否有像小程序中的block标签？就是template
小程序中的block 1.<block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性. 2.因为wx:if是一个控制属性,需要将它添加到一个标签上.如果要 ...
微信小程序中wxml的标签说明
对于不熟悉web开发的童鞋来说,开发微信小程序会遇到一个比较大的困难就是界面的排版问题了.其中wxml文件中的很多标签都需要慢慢的去熟悉,下面我就列出常用的标签及其分类.能够帮助之前没有经历过微信小程 ...
微信小程序中，block标签与view标签的区别及实例应用
介绍在微信小程序开发当中,除了最常使用的 <view> 标签以外, 还有 <block> 标签: 这两个标签还是有很明显的区别的:具体如下: 定义 <view> ...
微信小程序中如何将图片铺满屏幕，作为背景图片
背景图片的制作我相信有很多人和我一样,在制作背景图片是遇到了困难,比如图片为何显示扭曲,不是按给与图片大小显示的,又比如为何图片无法置顶显示,而是有一定的空间隔开等,在此我会演示如何制作一个背景图片 ...
小程序中的css样式有哪些,微信小程序中css样式media标签
前沿:微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需在css中我们使用media标签来区分调用哪个css样式, ...
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签前言萤石云开放平台微信开发者工具前言因为项目需要在微信小程序上展示实时视频流信息,以下内容是我将萤石云平台官方文档和自己实 ...
小程序中image标签的mode属性，防止图片调整宽高而导致拉伸的问题
微信小程序中图片直接调整宽高很容易导致图片拉伸变形,达不到预期效果 mode = "widthFix" (按图片高度自适应) 或 mode="aspectFill&quo ...

最新文章

热门文章