自己码了个微信小程序图片全屏预览组件，并解决了svg真机显示黑屏问题（即png等格式可以正常显示，但就svg无法显示）。
/*** 微信小程序图片预览组件* 1.支持预览svg、png、jpeg、jpg、bmp等小程序支持的格式，* 支持保存图片到本地，支持双指缩放，单指拖动，* 支持本地图片、网络图片、小程序云存储图片。* 2.不会存在小程序官方提供的全屏预览接口（https://developers./miniprogram/dev/api/media/image/wx.previewImage.html）* 出现的svg预览咱部分真机上不显示的问题。* 3.作者：crysu* 4.作者博客：* 5.作者邮箱：zbshr@*/
属性说明
属性名 默认值类型 说明 必填imgUrl[]Array图片地址的数组 是imgPos0 Number组件加载时默认加载哪张图片，默认为0，即imgUrl数组的第一个否showImgFlagtrue Boolean 显示/隐藏组件的控制器，true为显示，false为隐藏 否scaleMin 0.2 String图片缩放最小倍数 否scaleMax 20String图片缩放最大倍数 否scaleDefault 2 String图片缩放默认倍数 否contentBackgroundColor rgba(0,0,0,0.6) String组件页面背景色 否 imgBackgroundColor rgba(0,0,0,0.0) String图片背景色 否
引用示例：
首先在小程序根目录创建名为Component的文件夹，然后把源码（文章末尾有链接）文件中的imgPreview文件夹放到Component中
然后在需要引入组件的页面写入以下代码
json:
"usingComponents": {"showImg": "/Component/imgPreview/imgPreview"}
wxml:
这里的话，imgUrl这个属性是必须的，其他的可以不要
<showImg imgUrl="{{imgUrl}}" imgPos="{{imgPos}}"></showImg>
wxss:
无
js:
data: {imgUrl: ["/test/419101938_8567.svg","/test/333.png","./img/md-chevron_left.svg","cloud://yiyi-62qxe.7969-yiyi-62qxe-1257035987/1564989457044.jpg"],imgPos: 0,showImgFlag: false,scaleMin: "0.2",scaleMax: "20",scaleDefault: "2",contentBackgroundColor: "rgba(0, 0, 0, 0.6)",imgBackgroundColor: "rgba(0, 0, 0, 0)"},
效果：
组件源码：
/b09rxx77c
密码:a4m7
如果觉得《微信小程序图片全屏预览组件 并解决svg真机显示黑屏问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
