uni-app uni.previewImage图片加载失败

测试过的手机：

手机一：readme 30，安卓10。
手机二：荣耀 K30，安卓11。
手机三：vivo X60，安卓11。

示例代码：

<image :src="src" mode="" @click="openImg"></image>  

// 略...  

src: 'https://221.x.xxx.xx:9xx3/evo-apigw/evo-oss/5d4e259d-aa8a-11ec-b376-c0395a8421cf/20220526/1/dsf_642530c1-dc94-11ec-b3bc-c0395a8421cf_28022485_28597380.jpg?token=1:xxxxxa-3xxxxxxx'  

// 略...  
openImg() {  
    uni.previewImage({  
        urls: [this.src]  
    })  
}

操作步骤：

没啥好重复的

预期结果：

希望能正常加载

实际结果：

一直转圈

bug描述：

在APP上用 image 标签可以渲染，但是调用 uni.previewImage 方法后，图片加载失败，一直转圈。在 H5 上没问题。

vueper 1楼•10 天前作者

换张百度的图片，看看

sinazl 2楼•10 天前

试过了可以的，其他平台链接图片都ok。就这个大华平台推送的图片链接不行。

yibo5220 3楼•10 天前

楼主请问解决了吗？我也遇见这个问题了

zlyuanteng 4楼•10 天前

先下到本地，然后再显示

caililin 5楼•10 天前

解决方案是让运维重开一个端口，访问新端口的图片地址，就可以了。

vueper 6楼•10 天前作者

在 uni-app 中使用 uni.previewImage 预览图片时，如果图片加载失败，可能是由于以下原因导致的。你可以根据这些原因进行排查和解决：

1. 图片路径问题

相对路径问题：确保图片路径是正确的，尤其是在使用相对路径时，路径可能因为项目结构的变化而失效。
网络图片问题：如果图片是网络图片，确保图片链接是有效的，并且网络请求没有受到限制（如跨域问题）。

解决方案：

检查图片路径是否正确，可以使用绝对路径或完整的网络 URL。
如果是网络图片，确保图片链接可以正常访问。

uni.previewImage({
    urls: ['https://example.com/image.jpg'], // 确保 URL 正确
    current: 'https://example.com/image.jpg'
});

2. 图片格式问题

确保图片格式是支持的格式（如 .jpg, .png, .gif 等）。
某些特殊格式的图片可能在某些平台上无法正常显示。

解决方案：

将图片转换为常见的格式（如 .jpg 或 .png）。

3. 跨域问题

如果图片是网络图片，并且服务器没有正确配置 CORS（跨域资源共享），可能会导致图片加载失败。

解决方案：

确保服务器配置了正确的 CORS 头，允许跨域访问。
或者将图片下载到本地，使用本地路径进行预览。

4. 图片过大

如果图片文件过大，可能会导致加载时间过长或加载失败。

解决方案：

压缩图片，减小文件大小。

5. 平台兼容性问题

不同平台（如微信小程序、H5、App）对 uni.previewImage 的支持可能有所不同，某些平台可能会有特定的限制。

解决方案：

检查目标平台的文档，确保 uni.previewImage 在该平台上正常工作。
如果是平台特定的问题，可能需要使用平台特定的 API 或解决方案。

6. 缓存问题

如果图片之前加载过，可能会因为缓存问题导致加载失败。

解决方案：

尝试清除缓存，或者在图片 URL 后添加随机参数来避免缓存。

uni.previewImage({
    urls: ['https://example.com/image.jpg?t=' + new Date().getTime()],
    current: 'https://example.com/image.jpg?t=' + new Date().getTime()
});

7. 网络问题

如果网络连接不稳定，可能会导致图片加载失败。

解决方案：

检查网络连接，确保网络稳定。

8. 代码逻辑问题

确保 uni.previewImage 的调用逻辑正确，参数传递无误。

解决方案：

检查代码逻辑，确保 urls 和 current 参数正确传递。

uni.previewImage({
    urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'],
    current: 'https://example.com/image1.jpg'
});