官方链接下载示例项目需要注册账号,似乎有点不友好,不想注册账号的可以去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. ActiveMQ c# 系列——进阶实例(三)

    前言 前面介绍了基本的消费者和生产者,那么看下他们之间有什么其他的api. 正文 消费者设置等待时间 生产者生产了5条消息 改一下消费者. static void Main(string[] args ...

  2. Redis介绍、使用、数据结构和集群模式总结

    Redis(Remote Dictionary Server)是一个开源的,基于内存的数据结构存储系统,它支持多种数据结构,如字符串(String).列表(List).集合(Set).有序集合(Sor ...

  3. 力扣647(java)-回文子串(中等)

    题目: 给你一个字符串 s ,请你统计并返回这个字符串中 回文子串 的数目. 回文字符串 是正着读和倒过来读一样的字符串. 子字符串 是字符串中的由连续字符组成的一个序列. 具有不同开始位置或结束位置 ...

  4. 最佳实践丨构建云上私有池(虚拟IDC)的5种方案详解

    ​简介:云上私有池系列终篇终于来了,本文将重点介绍构建云上的私有池(虚拟IDC)的多种方案和各自的优缺点,并给出相关的性价比优化建议. 本文作者:阿里云技术专家李雨前 摘要 围绕私有池(虚拟IDC)的 ...

  5. 基于 ASK + EB 构建容器事件驱动服务

    简介:本篇文章以"在线文件解压场景"为例为大家展示经典 EDA 事件驱动与容器如何搭配使用. 作者:冬岛.肯梦 导读 EDA 事件驱动架构( Event-Driven Archit ...

  6. DLF +DDI 一站式数据湖构建与分析最佳实践

    简介: 本文由阿里云数据湖构建 DLF 团队和 Databricks 数据洞察团队联合撰写,旨在帮助您更深入地了解阿里云数据湖构建(DLF)+Databricks 数据洞察(DDI)构建一站式云上数据 ...

  7. 技术干货 | Native 页面下如何实现导航栏的定制化开发?

    ​简介: 通过不同实际场景的描述,供大家参考完成 Native 页面的定制化开发. ​ 很多 mPaaS Coder 在接入 H5 容器后都会对容器的导航栏进行深度定制,本文旨在通过不同实际场景的描述 ...

  8. UOS 开启 VisualStudio 远程调试 .NET 应用之旅

    本文记录的是在 Windows 系统里面,使用 VisualStudio 2022 远程调试运行在 UOS 里面 dotnet 应用的配置方法 本文写于 2024.03.19 如果你阅读本文的时间距离 ...

  9. dotnet 记 TaskCompletionSource 的 SetException 可能将异常记录到 UnobservedTaskException 的问题

    本文将记录 dotnet 的一个已知问题,且是设计如此的问题.假定有一个 TaskCompletionSource 对象,此对象的 Task 没有被任何地方引用等待.在 TaskCompletionS ...

  10. Java的Stream流的分页,Stream的skip和limit实现分页

    1.工具类 package com.cc.testproject.utils; import com.github.pagehelper.PageInfo; import org.springfram ...