uni-app通过uni.previewImage实现在线预览图片

问题还原:

在项目开发中,用户上传完图片后,在展示区域想要预览图片,所以需要实现图片的在线预览功能。那么如何实现那?

解决方案:

**使用uni-app自带的uni.previewImage({current: 0, urls: url})即可实现图片的在线预览功能。**需要注意的是其中urls是图片路径数组。具体代码如下所示:
界面代码如下所示:

<text class="value"><a @tap="imgView(item.imgName, item.imgPath)" style="color: blue;">{{item.imgName}}</a></text> 

JS代码如下所示:

methods: {
			//图片预览
			imgView(imgName, imgPath) {
				if(imgName &&imgPath) {
					const imgTypeArr = ["bmp","jpg","png","tif","gif","pcx","tga","exif","fpx","svg","psd","cdr","pcd","dxf","ufo","eps","ai","raw","WMF","webp","avif","apng"];
					const lastIndex = imgName.lastIndexOf(".");
					const imgType = imgName.substring(lastIndex + 1, imgName.length);
					if(imgTypeArr.includes(imgType)) {
						var imgPaths = [];
						imgPaths.push(imgPath);//注:这里是图片的全路径,直接浏览器访问可以展示的那种。
						uni.previewImage({
							current: 0,
							urls: imgPaths,//图片路径是个数组,数组里面放图片的全路径
							longPressActions: {  //长按保存图片到相册
								itemList: ['保存图片'],
								success: (data)=> {
									uni.saveImageToPhotosAlbum({ //保存图片到相册
										filePath: payUrl,
										success: function () {
											uni.showToast({icon:'success',title:'保存成功'})
										},
										fail: (err) => {
											uni.showToast({icon:'none',title:'保存失败,请重新尝试'})
										}
									});
								},
								fail: (err)=> {
									console.log(err.errMsg);
								}
						}
						})
					}else {
						uni.showToast({
							icon: 'none',
							title: '只能预览图片!'
						});
					}
				}
			}
		}

注:笔者在代码中判断了下文件格式是不是图片。

PS:欢迎大家点赞、关注、支持。如有需要,欢迎添加博主QQ沟通交流!QQ:156587607

### 解决uni-app中`uni.previewImage`预览图片时背景透明的问题 在uni-app框架下,当使用`uni.previewImage`接口进行图片预览时,默认情况下可能无法直接通过参数配置来改变背景的透明度。然而,可以通过自定义样式以及利用插件的方式来实现这一需求。 对于希望调整`uni.previewImage`显示效果的情况,可以考虑采用第三方组件库中的图片查看器组件替代默认行为,这些组件通常提供了更丰富的定制选项,包括但不限于修改遮罩层的颜色和透明度等属性[^1]。 如果坚持要基于原生API做改动,则需注意官方文档并没有提供直接设置背景不透明的方法。不过,在实际开发过程中,开发者们往往会借助CSS覆盖的方式间接影响弹窗外观。具体做法是在项目的全局样式表(如`/static/css/app.css`或`/common/style/index.wxss`)中加入如下代码片段: ```css /* 调整uni-preview-image组件的蒙版 */ .uni-popup__mask { background-color: rgba(0, 0, 0, .8); /* 设置黑色半透明背景 */ } ``` 上述方法适用于部分版本的HBuilderX编译环境下的项目;不同平台可能会有不同的表现形式,请根据实际情况测试并适当调整选择器名称与路径[^2]。 另外值得注意的是,由于`uni.previewImage`属于底层能力调用,其渲染机制依赖于各终端系统的浏览器内核特性,因此某些特殊样式的适配可能存在兼容性差异。建议先尝试简单的样式注入方案解决问题后再逐步优化体验细节。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值