uniapp中如何使用image图片

当在UniApp中使用图片时,可以通过<image>标签将图片显示在页面上。这个标签可以指定src属性来引用图片,并且可以通过mode属性来设置图片的显示模式。除此之外,还可以利用@click事件来实现图片的点击事件。在编写代码时,要注意引用图片的路径和处理图片的点击事件,以及适配不同屏幕尺寸的情况。UniApp中的图片使用相对简单,下面的博客将详细介绍UniApp中图片的使用方法以及相关注意事项。

基本使用:

<template><u--image :showLoading="true" :src="src" width="80px" height="80px" @click="click"></u--image>
</template><script>export default {data() {return {src: 'https://cdn.uviewui.com/uview/album/1.jpg'}}}
</script>

剪切模式:

<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="widthFix"></u--image>

图片形状:

  • 通过shape参数设置图片的形状,circle为圆形,square为方形
  • 如果为方形时,还可以通过radius属性设置圆角值
<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></u--image>

懒加载:

注意:此功能只对微信小程序、App、百度小程序、字节跳动小程序有效,默认开启。

<u-image src="https://cdn.uviewui.com/uview/album/1.jpg" :lazy-load="true"></u-image>

加载中提示:

图片加载过程中,为加载中状态(默认显示一个小图标),可以通过loading自定义插槽,结合uView的u-loading组件,实现加载的动画效果。

<u--image src="https://cdn.uviewui.com/uview/album/1.jpg"><template v-slot:loading><u-loading-icon color="red"></u-loading-icon></template>
</u--image>

加载错误提示:

图片加载失败时,默认显示一个错误提示图标,可以通过error自定义插槽,实现个性化的提示方式。

<u--image src="https://cdn.uviewui.com/uview/album/1.jpg"><view slot="error" style="font-size: 24rpx;">加载失败</view>
</u--image>

淡入动画:

组件自带了加载完成时的淡入动画效果:

  • 通过fade参数配置是否开启动画效果
  • 通过duration参数配置动画的过渡时间,单位ms
<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" :fade="true" duration="450"></u--image>

事件冒泡:

默认情况下,组件是允许内部向外事件冒泡的,因为很多情况下,我们都希望点击图片,同时图片所在的父元素的点击事件也能触发。
如果您想避免事件冒泡,那么您可以在组件外面嵌套一个view,同时给它加上@tap.stop即可。

<!-- 点击图片将不会触发clickHandler -->
<view @tap="clickHandler"><view @tap.stop><u--image src="https://cdn.uviewui.com/uview/album/1.jpg"></u--image></view>
</view>
参数说明类型默认值可选值
src图片地址,强烈建议使用绝对或者网络路径String--
mode裁剪模式,见上方说明StringaspectFill-
width宽度,单位任意,如果为数值,默认单位pxString | Number300-
height高度,单位任意,如果为数值,默认单位pxString | Number225-
shape图片形状,circle-圆形,square-方形Stringsquaresquare
radius圆角,默认单位pxString | Number0-
lazyLoad是否懒加载,仅微信小程序、App、百度小程序、字节跳动小程序有效Booleantrue-
showMenuByLongpress是否开启长按图片显示识别小程序码菜单,仅微信小程序有效Booleantrue-
loadingIcon加载中的图标,或者小图片Stringphoto-
errorIcon加载失败的图标,或者小图片Stringerror-circle-
showLoading是否显示加载中的图标或者自定义的slotBooleantruefalse
showError是否显示加载错误的图标或者自定义的slotBooleantruefalse
fade是否需要淡入效果Booleantruefalse
webp只支持网络资源,只对微信小程序有效Booleanfalsetrue
duration搭配fade参数的过渡时间,单位msString | Number500-
bgColor背景颜色,用于深色页面加载图片时,为了和背景色融合String#f3f4f6-

#Slot

名称说明
loading自定义加载中的提示内容
error自定义失败的提示内容

#CellItem Events

事件名说明回调参数
click点击图片时触发-
error图片加载失败时触发err: 错误信息
load图片加载成功时触发-

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/578773.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pr2024 for Mac/win中文版:为创意无限延展的全新时代

随着科技的不断进步和创新&#xff0c;影视制作行业也在不断发展。作为专业视频编辑软件的领军者&#xff0c;Premiere Pro于2024年推出了全新的版本Pr2024&#xff0c;为创意无限延展的全新时代揭开了崭新的篇章。 Pr2024以其强大的功能和卓越的性能&#xff0c;为用户带来了…

广州华锐互动VRAR:VR煤矿安全警示教育系统提供真实生动的场景体验

随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已经逐渐渗透到各个领域&#xff0c;为人们的生活带来了诸多便利。在煤矿行业&#xff0c;VR技术的应用也日益受到关注。广州华锐互动开发的VR煤矿安全警示教育系统&#xff0c;旨在通过虚拟现实技术&…

【Qt-QThread-QQueue】

Qt编程指南 ■ QThread■ 示例 ■ QQueue■■ ■ QThread ■ 示例 #include <QThread> class myThread : public QThread {Q_OBJECT signals:downloaded(int); public:myThread();void run(){for(int i0;i<100; i){//p1->setValue(i);emit downloaded(i);QThread…

idea导入spring-framework异常:error: cannot find symbol

从github上clone代码spring-framework到本地后导入idea&#xff0c;点击gradle构建后控制台提示异常&#xff1a; 具体异常信息&#xff1a; /Users/ZengJun/Desktop/spring-framework/buildSrc/src/main/java/org/springframework/build/KotlinConventions.java:44: error:…

https 和 http 有什么区别?

http 和 https的区别? 一、传输信息安全性不同 1、http协议&#xff1a;是超文本传输协议&#xff0c;信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文&#xff0c;就可以直接读懂其中的信息。2、https协议&#xff1a;是具有安全性的ssl加密传输协议…

Mac_通过chmod处理文件权限

chmod 简介 chmod 是一个 Unix 和类 Unix 系统中的命令&#xff0c;用于更改文件或目录的权限。chmod 的名称来源于 “change mode”&#xff0c;它允许用户修改文件或目录的读取&#xff08;read&#xff09;、写入&#xff08;write&#xff09;和执行&#xff08;execute&a…

kubernetes面试之calico网络组件的实现原理

kubernetes中的calico网络组件是一种高效、可扩展的容器网络解决方案&#xff0c;用于实现容器的网络通信和互联&#xff0c;其实现原理如下&#xff1a; 1. IP地址管理 calico通过为每个节点指定唯一的IP地址段&#xff0c;并利用BGP协议来分发路由表&#xff0c;从而确保容…

锂空气电池,预计到2025年将达到17.8亿美元

锂空气电池是一种可充电电池&#xff0c;它利用空气中的氧气与锂离子发生反应来发电。它们具有提供高能量密度的潜力&#xff0c;使其成为电动汽车和其他储能应用的有前途的技术。然而&#xff0c;锂空气电池的开发仍处于早期阶段&#xff0c;在商业化之前需要克服一些挑战。全…

swagger1.2 apiPost工具测试接口没有问题,换成swagger 接口调测时报错 Required request body is missing

把 请求方法由get换成post GetMapping换成 PostMapping 原因apiPost自动把请求json参数封装到请求体里了&#xff0c; 但swagger没有封装&#xff0c;通过networker可以看到载荷里并没有任何东西

Ansys Speos | 3D Texture 车灯案例应用

Speos 3D Texture功能提供了一种解决方案&#xff0c;可以绕过 CAD 系统限制来设计和模拟数百万个小图案&#xff1a;pattern图案的分布类型和重复次数。3D Texture可用于设计照明系统&#xff0c;例如光导、车灯、亮度增强膜 &#xff08;BEF&#xff09; 和由数百万个几何元素…

CSS进度条动画

CSS进度条移动 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-widt…

2023.12.22力扣每日一题——得到山形数组的最少删除次数

2023.12.22 题目来源我的题解方法一 前后缀分解最长递增子序列 题目来源 力扣每日一题&#xff1b;题序&#xff1a;1671 我的题解 方法一 前后缀分解最长递增子序列 &#xff08;参照题解中的&#xff1a;灵茶山艾府的解法&#xff09; 要想删除次数最少&#xff0c;山形数…

从零开发短视频电商 SageMaker实时推理实例和费用

注意每个region价格不一样。示例为&#xff1a;美东2-俄亥俄的价格 主要找的都是CPU 4核 原文&#xff1a;https://aws.amazon.com/cn/sagemaker/pricing/ 实例价格 以下是您提供的信息转换成表格的形式&#xff1a; 实例类型vCPU内存每小时价格 (USD)备注标准型ml.t2.xlarge…

html页面 通过jquery.i18n.properties添加多语言

第一步&#xff1a; <div class"set_lang"><div class"lang_btn" data-langtype"zh">中文简体</div> | <div class"lang_btn" data-langtype"hk">中文繁體</div> |<div class"lang_b…

数据结构学习 Leetcode72 编辑距离

关键词&#xff1a;动态规划 最长公共子序列 题目&#xff1a; 思路&#xff1a; 这题我虽然做出来了但是还是有点迷糊。首先&#xff0c;这道题一定是和最长公共子序列相似的。 所以往最长公共子序列方向思考&#xff0c;考虑的它的状态和转移方程以及边界。 状态和转移方…

英国允许法官使用ChatGPT写裁决书,并公布官方指南!

知名媒体The Week消息&#xff0c;英格兰和威尔士地区的法官&#xff0c;允许使用ChatGPT撰写法律裁决书。 英国的司法官网已经发布了官方指南&#xff0c;详细描述了使用ChatGPT的正确使用方法、潜在风险以及示例&#xff0c;同时适用于首席大法官、高级庭长等负责司法的所有…

shiro反序列化与fastjson反序列化漏洞原理

01 shiro反序列化漏洞的原理 Shiro反序列化漏洞的原理是攻击者通过精心构造恶意序列化数据&#xff0c;使得在反序列化过程中能够执行任意代码。Shiro是一个Java安全框架&#xff0c;提供了身份验证、授权、加密和会话管理等功能。其中&#xff0c;Shiro的序列化功能可以将对象…

2023年安徽省职业院校技能大赛(高职组)“区块链技术应用”赛项竞赛任务书

2023年安徽省职业院校技能大赛&#xff08;高职组&#xff09;“区块链技术应用”赛项竞赛任务书 目录 2023年安徽省职业院校技能大赛&#xff08;高职组&#xff09;“区块链技术应用”赛项竞赛任务书 模块一&#xff1a;区块链产品方案设计及系统运维&#xff08;35分&…

【ai】阿里云 大模型 api 聚合平台 dashscope

阿里云登录 - 欢迎登录阿里云&#xff0c;安全稳定的云计算服务平台 快速调用 前提条件 已开通服务并获得API-KEY&#xff1a;开通DashScope并创建API-KEY。 已安装最新版SDK&#xff1a;安装DashScope SDK。 DashScope灵积模型服务建立在“模型即服务”&#xff08;Model-a…

云仓酒庄的品牌雷盛红酒LEESON分享干红是纯葡萄酿造的吗?

干红是一种葡萄酒的简称&#xff0c;全称是干型红葡萄酒。葡萄酒按含残糖量分为干型、半干型、半甜型和甜型。无论什么型的酒&#xff0c;只要是葡萄酒&#xff0c;那就是葡萄酿造的。 云仓酒庄的品牌雷盛红酒LEESON分享干红是葡萄酒的一种&#xff0c;而葡萄酒却不止干红一种…