官方链接下载示例项目需要注册账号,似乎有点不友好,不想注册账号的可以去gitee上下载示例项目

如果你上来就是把previewImg.js 放在head中可能会出现意想不到的错误,比如下面这样子,遇到这个不要慌,咱们可以考虑给这个js换个地方引入,比如放在body中,这样就可以完美解决掉这个报错信息

Uncaught TypeError: Cannot read property 'appendChild' of null
at new i (previewImage.min.js:1)
at previewImage.min.js:1
at previewImage.min.js:1
at previewImage.min.js:1

使用说明

// 获取所有的图片
var imgs = findViewsByClassName("previewImg");
// 存放获取过来图片的src链接
var urls = [];
// 循环往urls中添加图片链接
for (var i = 0; i < imgs.length; i++) {
(function(i) {
var elm = imgs[i];
// 获取图片的src属性,不同地方不同写法,我这是嵌入到sdk中的,你们写还是按照js的语法书写即可
urls.push(elm.getElement().src);
// 图片的点击事件
elm.setOnclickListener(function() {
var current = elm.getElement().src;
var obj = {
urls: urls,
current: current
};
previewImage.start(obj);
})
})(i)
}

当你都书写完成后,会发现控制台又来了个报错信息,但是这个报错并没有影响你的程序执行
http://static.luyanghui.com/svg/oval.svg 404 (Not Found)

解决方法去源码中将这个地址【http://static.luyanghui.com/svg/oval.svg】 换成其他的,随便啥都可以,但是不能为空

H5图片预览的更多相关文章

  1. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

  2. H5图片预览功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. h5的图片预览

    h5的图片预览是个好东西,不需要保存到后台就能预览图片 代码也很短 <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

  5. js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  6. 浅谈js本地图片预览

    最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...

  7. JS魔法堂之实战:纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  8. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  9. js实现图片预览

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  10. 普通图片预览及demo(非分块)

    演示地址: http://codeman35.itongyin.com:19003/v2/image.html 功能:通过加载大图预览,这种方式无法和google art 比较.只能应用于简单的图片预 ...

随机推荐

  1. 利用navicat 完成两台服务器之间的数据库迁移,安全可靠

    首先,准备工作先做好 1. 工具,navicat,我这里用的是navicat12+ 2. 建立两台服务器的链接,即新建链接,mysql,同时,需要在迁移目标服务器上面实现建立好对应的数据库,即如果有1 ...

  2. maven BUILD FAILURE

    maven BUILD FAILURE 使用命令进行导包失败,错误为BUILD FAILURE 然后使用mvn help:system看一下是不是maven有问提 然后出现了新的错误No plugin ...

  3. 剑指offer05(Java)-替换空格(简单)

    题目: 请实现一个函数,把字符串 s 中的每个空格替换成"%20". 示例 1: 输入:s = "We are happy."输出:"We%20are ...

  4. portainer安装,配置,使用

    Portainer安装 Portainer是Docker容器管理可视化界面,主要是可以通过可视化界面创建,管理Dockert容器,并且支持多个节点管理(免费版支持五个节点). Portainer官网地 ...

  5. Java 应用压测性能问题定位经验分享

    简介: 问题千千万,但只要修练了足够深厚的内功,形成一套属于自己的排查问题思路和打法,再加上一套支撑问题排查的工具,凭借已有的经验还有偶发到来的那一丝丝灵感,相信所有的问题都会迎刃而解. 作者:凡勇 ...

  6. Flutter+FaaS一体化任务编排的思考与设计

    作者:闲鱼技术-古风 Flutter+Serverless三端一体研发架构,客户端不仅仅是编写双端的代码,而是扩展了客户端的工作边界,形成完整的业务闭环.在新的研发模式落地与实践的过程中,一直在思考如 ...

  7. Bilibili资深运维工程师:DCDN在游戏应用加速中的实践

    简介: bilibili资深运维工程师李宁分享<DCDN在游戏应用加速中的实践>从bilibili游戏应用的效果和成本入手,深入浅出地分享DCDN全站加速在游戏加速场景中的应用. 日前,云 ...

  8. 如何做好技术 Team Leader?

    简介: 作为一个技术TL(Team Leader),除了自身技能,还会面临诸多团队管理上的困难和挑战.如何定义和明确团队的目标?怎样建立优秀的工程文化?让团队长期发挥战斗力和创新能力的核心是什么?本文 ...

  9. Flink 在 58 同城的应用与实践

    ​简介: 58 同城的实时 SQL 建设以及如何从 Storm 迁移至 Flink. 本文整理自 58 同城实时计算平台负责人冯海涛在 Flink Forward Asia 2020 分享的议题< ...

  10. [Py] Python dict 倒序操作

    倒序操作很简单,使用 reversed( ) 方法,原本是 ['a', 'b', 'c'],倒序后就是 ['c', 'b', 'a'] Ref:在线运行Python代码 Refer:Python di ...