uni-app uni.previewImage 图片预览失效

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app uni.previewImage 图片预览失效

示例代码：

<script setup>
import { ref } from 'vue';

const preview = () => {
uni.previewImage({
urls: [
'https://sdata.shijiatrade.com/api/img/202408/u411/aaa2fbf51a3ce60dc8f88c04062cde53/img_1724481988_8bb3af544f8a3b7868bca26c905a4618.jpg',
],
});
};
</script>

<template>
<view>
<image
src="https://sdata.shijiatrade.com/api/img/202408/u411/aaa2fbf51a3ce60dc8f88c04062cde53/img_1724481988_8bb3af544f8a3b7868bca26c905a4618.jpg"
mode="scaleToFill"
class="w-400 h-400"
@click="preview"
/>
</view>
</template>

操作步骤：

如上代码

预期结果：

正常预览

实际结果：

页面白屏 APP好像卡死

bug描述：

uni.previewImage 图片预览失效。使用的是HBuilderX 4.31.2024102414-alpha 云打包，之前云打包都没这个情况。在各种安卓手机都复现出来了

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 Win11
HBuilderX类型 Alpha
HBuilderX版本 4.31
手机系统 Android
手机系统版本 Android 15
手机厂商 小米、Honor、oppo、vivo
手机机型 安装
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

Harmonyos Next教程
5 回复

HBuilderX 4.32.2024110103-alpha 已修复


用标准基座调试正常，用自定义基座异常

在补充一下： 在4.28HBuilder的标准基座下正常，云打包应该用的还是最版本打的所以自定义基座不正常。在4.31的标准基座也是同样的情况

该问题alpha云打包机已修复，请重新云打包 后续发版更新修复日志

针对您提到的 uni-app 中 uni.previewImage 图片预览失效的问题，这通常可能由多种原因引起，包括图片路径错误、组件使用不当、权限问题等。以下是一些常见的排查思路和代码示例，希望能帮助您定位并解决问题。

1. 确认图片路径正确

确保传递给 uni.previewImage 的图片路径是正确的。如果图片是本地资源，路径应以 /static/ 开头（假设您将图片放在了 static 文件夹中）。

// 假设图片路径正确存储在urls数组中
let urls = ['/static/images/image1.jpg', '/static/images/image2.jpg'];
uni.previewImage({
    current: urls[0], // 当前显示图片的http链接
    urls: urls // 需要预览的图片http链接列表
});

2. 检查权限配置

如果您的应用需要访问用户相册或存储设备上的图片，确保在 manifest.json 中配置了相应的权限。

// manifest.json
{
    "mp-weixin": { // 示例为微信小程序配置
        "appid": "your-app-id",
        "setting": {
            "permission": {
                "scope.writePhotosAlbum": {
                    "desc": "你的位置信息将用于小程序相册权限"
                },
                "scope.readUserData": {
                    "desc": "你的位置信息将用于小程序用户信息"
                }
                // 根据需要添加其他权限
            }
        }
    }
}

3. 使用网络图片

如果图片是网络上的资源，确保 URL 是可访问的，并且没有跨域问题。

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

4. 调试和错误处理

在调用 uni.previewImage 时，添加 fail 和 complete 回调，以便在预览失败时获取更多信息。

uni.previewImage({
    current: urls[0],
    urls: urls,
    fail: function(err) {
        console.error('预览图片失败:', err);
    },
    complete: function() {
        console.log('预览图片完成');
    }
});

5. 清理缓存和重启

有时候，简单的清理项目缓存和重启开发者工具或手机预览可以解决一些莫名其妙的问题。

如果以上方法仍然无法解决问题，建议检查 uni-app 的官方文档和社区，看看是否有其他开发者遇到并解决了类似的问题。希望这些代码示例能帮助您快速定位问题所在！

回到顶部