uni-app ios previewImage图片地址如果带有类似七牛文字水印的无法预览

uni-app ios previewImage图片地址如果带有类似七牛文字水印的无法预览

示例代码：

var currentUrl = 'https://dn-ojpbly1un.qbox.me/gogopher.jpg?imageView2/1/w/200/h/200/format/jpg/q/75|watermark/2/text/5LiD54mb5LqR/font/5a6L5L2T/fontsize/600/fill/I0VDMEQwRA==/dissolve/100/gravity/SouthEast/dx/10/dy/10'  
var imgs       = [];  
imgs.push(currentUrl);  
uni.previewImage({  
    urls:imgs,  
    indicator:"none",  
    current:currentUrl  
})


## 操作步骤：
无

## 预期结果：
无

## 实际结果：
无

## bug描述：
ios previewImage.图片地址如果是带有类似七牛文字水印的无法预览,一直加载中  

图片地址类似下面这种  安卓没问题
https://dn-ojpbly1un.qbox.me/gogopher.jpg?imageView2/1/w/200/h/200/format/jpg/q/75|watermark/2/text/5LiD54mb5LqR/font/5a6L5L2T/fontsize/600/fill/I0VDMEQwRA==/dissolve/100/gravity/SouthEast/dx/10/dy/10

更多关于uni-app ios previewImage图片地址如果带有类似七牛文字水印的无法预览的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

问题确认，已加分，后续优化
临时解决办法，对参数进行编码： https://dn-ojpbly1un.qbox.me/gogopher.jpg?imageView2%2F1%2Fw%2F200%2Fh%2F200%2Fformat%2Fjpg%2Fq%2F75|watermark%2F2%2Ftext%2F5LiD54mb5LqR%2Ffont%2F5a6L5L2T%2Ffontsize%2F600%2Ffill%2FI0VDMEQwRA%3D%3D%2Fdissolve%2F100%2Fgravity%2FSouthEast%2Fdx%2F10%2Fdy%2F10

更多关于uni-app ios previewImage图片地址如果带有类似七牛文字水印的无法预览的实战教程也可以访问 https://www.itying.com/category-93-b0.html


Bug已修复 下个版本发布

这个问题是由于iOS系统对URL中包含特殊字符的处理机制导致的。七牛云的水印参数中包含竖线(|)等特殊字符，iOS的WebView在解析这类URL时会出现问题。

解决方案：

  1. 对URL进行编码处理：
var encodedUrl = encodeURIComponent(currentUrl);
var imgs = [encodedUrl];
uni.previewImage({
    urls: imgs,
    current: encodedUrl
});
  1. 如果编码后仍无法解决，可以尝试使用七牛云的URL签名方式，将水印参数放在签名之后：
var url = 'https://dn-ojpbly1un.qbox.me/gogopher.jpg?imageView2/1/w/200/h/200/format/jpg/q/75';
var watermark = 'watermark/2/text/5LiD54mb5LqR/font/5a6L5L2T/fontsize/600/fill/I0VDMEQwRA==/dissolve/100/gravity/SouthEast/dx/10/dy/10';
var signedUrl = url + '&' + watermark;
回到顶部