previewimage在uni-app百度APP上会预览到没在数组的图片，图片是当前页的一些其他背景图之类的

previewimage在uni-app百度APP上会预览到没在数组的图片，图片是当前页的一些其他背景图之类的

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/H5

浏览器平台：手机系统浏览器
浏览器版本：15.18.0.11
App下载地址或H5网址：http://cyb.zzwbwj.top/work/salesmanCard/h5

操作步骤：

  • 在百度APP中浏览链接

预期结果：

  • 预览7张图片

实际结果：

  • 预览到没在数组中的图片

bug描述：

let arr = this.bannerList.map(item => item.path)  
uni.previewImage({  
    urls: arr,  
    current: e  
})

左下角前面还有4张是我页面其他的本地图片 第4张是我this.bannerList的第一张图片 其他浏览器都正常显示


更多关于previewimage在uni-app百度APP上会预览到没在数组的图片，图片是当前页的一些其他背景图之类的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

你好 打开这个网址 要搜索后才能看到图片吗？ 可以发一个复现录屏吗？

更多关于previewimage在uni-app百度APP上会预览到没在数组的图片，图片是当前页的一些其他背景图之类的的实战教程也可以访问 https://www.itying.com/category-93-b0.html


http://cyb.zzwbwj.top/work/salesmanCard/1.mp4

也好像是没触发previewimage 是触发了百度的预览图片 麻烦先看一下

回复 3***@qq.com: 复现了 是百度app自带的 图片预览 你可以把你的页面中的图片改为背景图这样就不会触发到百度app的图片预览了

回复 爱豆豆: 好的 我试一下 谢谢

回复 3***@qq.com: 把除了需要 previewimage预览的图 以外都改为背景图

回复 爱豆豆: 成功了 问题解决 谢谢啦

您好，麻烦发个完整的可复现demo

http://cyb.zzwbwj.top/work/salesmanCard/1.mp4

也好像是没触发previewimage 是触发了百度的预览图片 麻烦先看一下

这是一个百度APP特有的兼容性问题，百度APP的previewImage实现机制可能与其他平台不同，它会自动扫描当前页面的所有图片资源进行预览。

解决方案：

  1. 使用网络图片：将本地图片转换为网络图片URL，确保urls数组中只包含需要预览的图片链接。

  2. 添加图片标识：为需要预览的图片添加特定class或data属性，在百度APP中通过选择器过滤：

// 为需要预览的图片添加data-preview属性
<img :src="item.path" data-preview="true">

// 预览时过滤
let previewImages = Array.from(document.querySelectorAll('img[data-preview="true"]'))
    .map(img => img.src);
uni.previewImage({
    urls: previewImages,
    current: e
});
  1. 平台条件编译：
// #ifdef APP-PLUS
// 百度APP特殊处理
let arr = this.bannerList.map(item => item.path);
// #endif

// #ifndef APP-PLUS  
// 其他平台正常处理
let arr = this.bannerList.map(item => item.path);
// #endif
回到顶部