官方链接下载示例项目需要注册账号,似乎有点不友好,不想注册账号的可以去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. Chat2table,简易表格分析助手

    一 写在前面 之前用智谱AI的Chatglm3-6b模型写过一个简单的论文阅读助手,可用来辅助论文阅读等.而像表格,如Excel.CSV文件等内容的分析,也是不可忽略的需要,因此本文同样使用Chatg ...

  2. 在RockyLinux 9.2环境中编译CockroachDB 23.1

    目的 CockroachDB自 23.1开始,编译模式逐步放弃了Makefile,改用Bazel构建.实际上在23.1代码执行make buildshort 能够成功,但make build应该就会因 ...

  3. 【2021.6.26 NOI模拟】Problem B. 简单题 another solution

    Problem Description Input 从文件 b.in 中读入数据. 一个正整数 n. Output 输出到文件 b.out 中. 一个整数表示答案. Sample Data Input ...

  4. 【GDKOI 2024 TG Day2】不休陀螺(top) 题解

    考虑一个卡牌区间怎样才不是"陀螺无限". 一个是费用在打到一半时费用就不够了.考虑构造一个卡牌序列使其尽量能够在打到一半时费用就不够,如何构造呢? 把 \(a_i > b_i ...

  5. LORS:腾讯提出低秩残差结构,瘦身模型不掉点 | CVPR 2024

    深度学习模型通常堆叠大量结构和功能相同的结构,虽然有效,但会导致参数数量大幅增加,给实际应用带来了挑战.为了缓解这个问题,LORS(低秩残差结构)允许堆叠模块共享大部分参数,每个模块仅需要少量的唯一参 ...

  6. 力扣23(java)-合并k个升序链表(困难)

    题目: 给你一个链表数组,每个链表都已经按升序排列. 请你将所有链表合并到一个升序链表中,返回合并后的链表. 示例 1: 输入:lists = [[1,4,5],[1,3,4],[2,6]]输出:[1 ...

  7. 【pytorch学习】之自动微分

    5 自动微分 求导是几乎所有深度学习优化算法的关键步骤.虽然求导的计算很简单,只需要一些基本的微积分.但对于复杂的模型,手工进行更新是一件很痛苦的事情(而且经常容易出错).深度学习框架通过自动计算导数 ...

  8. 科普达人丨一图看懂阿里云ECS

    简介: 建议收藏  原文链接:https://click.aliyun.com/m/1000363154/ 本文为阿里云原创内容,未经允许不得转载.

  9. [FAQ] VisualStudio, Source file requires different compiler version (current compiler is 0.6.1+cxxxxxx)

    当使用的 Solidity 库文件中 pragma 指定的 版本 与本地编译器的使用版本不一致时,会出现这类提示. 解决方式是菜单栏 View -> Extensions -> Exten ...

  10. WPF 更改 DrawingVisual 的 RenderOpen 用到的对象的内容将持续影响渲染效果

    在 WPF 里面,可以通过 DrawingVisual 来进行使用底层的绘制方法,此方法需要调用 DrawingVisual 的 RenderOpen 拿到 DrawingContext 类型的对象, ...