小程序实现图片预览功能

var current = e.target.dataset.src;
    //预览图片
    wx.previewImage({
      current: current,
      urls: this.data.product.photoUrls,
    });

current:表示当前需要预览的图片,(默认图片数组的第一张) 
urls:表示图片的数组 
当然你需要在页面绑定事件

<image mode="widthFix" data-src="{{item}}" src="{{item}}" bindtap="previewImage" />

data-src:表示当前图片的路径,这个是必须,否则无法获取当前图片的src,

原文地址:https://www.cnblogs.com/gjack/p/8365421.html

时间: 2024-10-03 03:18:28

小程序实现图片预览功能的相关文章

微信小程序的实现图片预览功能

index.wxml <image src="../../images/01.jpg"class="userinfo-avatar" bindtap="previewImg01" background-size="cover"mode="aspectFill"></image> index.js //图片预览功能 previewImg01: function (event) { va

HTML5实现图片预览功能

两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

实现图片预览功能

本来以为图片预览功能非常的简单,就是在file标签change时获取路径展示给用户,但是浏览器处于安全考虑并不会让脚本获得绝对路径(这会在一定程度上暴露用户的文件 目录),只能获取文件名.所以要通过和后台的配合,在file标签发生change事件时,将图片以ajax的方式发送到后台,后台将图片保存在服务器,然后讲文件地址返回回来,再由前端展示给用户,完成预览功能! 文件的ajax并不是太容易,所以使用了jquery的插件,jquery.form.js.一些参数性问题可以参考form插件. <fo

原生js实现ajax的文件异步提交功能、图片预览功能.实例

<%-- Created by IntelliJ IDEA. User: yh Date: 2016/12/14 Time: 17:13 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file=&

利用js加载本地图片预览功能

直接上代码: 经测试,除safari6包括6以下不支持,其他均可正常显示. 原因:safari6不支持filereader,同时不能使用IE滤镜导致失效. fix: 可以利用canvas,解决safari6的问题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

使用ivx实现图片预览功能的经验总结

在实际案例中经常会需要展示一个图片列表,但是列表中由于图片数量比较多,所以每张图片都会比较小.这时我们需要一个功能,能够点击某一张图片就显示这张图片的大图,今天就是说一下ivx中如何实现这种预览效果. 1.图片列表demo中的图片列表是用循环组件创建的,图片资源已经存放在对象数组里,for容器下的图片组件已经绑定了当前数据中的图片资源.父容器是一个行并且开启了自动换行,每行显示两张图片.2.小图与大图上面循环创建出来的就是小图,我们还需要用一个大的图片组件来显示我们点击后的大图.这里使用了一个横

JS实现的图片预览功能

之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代码: body: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td heig

JavaScript图片上传前的图片预览功能

JS代码: 1 //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 2 function PreviewImage(fileObj, imgPreviewId, divPreviewId) { 3 var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value; 4 v

原创:跳坑指南——微信小程序真机预览跟本地不同的问题

微信小程序中出现最多的一个问题,就是真机跟本地不同:我简单列举一些我发现的原因,给大家参考,大家也可以把自己发现的东西回复给我,给我参考: 本地看不到数据,就先让本地能看到数据,再看本帖.... 1:本地可以看到数据,ios不行,安卓可以:可能是tsl版本问题不支持1.2导致,部分安卓可以允许tsl低于1.2而正常显示,而苹果不行: 解决方法:参考此帖排查问题并修复:request:fail错误(含https解决方案)(真机预览问题 可能是证书不受信任 2:本地可以看到数据,ios可以,安卓不行