H5图片预览

官方链接下载示例项目需要注册账号,似乎有点不友好,不想注册账号的可以去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】 换成其他的,随便啥都可以,但是不能为空

posted @ 2021-09-24 14:09  奔跑的前端猿  阅读(477)  评论(0编辑  收藏  举报