uniapp中如何使用image图片

2023-12-26 08:29:47

当在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图片加载成功时触发-

文章来源:https://blog.csdn.net/m0_72603435/article/details/135212676
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。