uni-app自定义基座无法显示image标签中的file:///storage开头路径图片

uni-app自定义基座无法显示image标签中的file:///storage开头路径图片

开发环境 版本号 项目创建方式
Windows 21H1 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：21H1

HBuilderX类型：正式

HBuilderX版本号：3.1.22

手机系统：Android

手机系统版本号：Android 11

手机厂商：华为

手机机型：nova 7 SE 鸿蒙OS

页面类型：nvue

打包方式：离线

项目创建方式：HBuilderX

示例代码：

```html
<image class="user-avatar" :src="signUpForm.avatar||'/static/icon/tab-bar/me.png'" mode="aspectFit"  
[@tap](/user/tap)="changeAvatar(signUpForm)"></image>

function changeAvatar(signUpForm) {  
    // #ifdef MP  
    uni.showModal({  
        title: "提示",  
        content: "因小程序无法直接截取图片，所以您应该提供一个宽高比为1:1的图片，且图片大小不超过1MB",  
        showCancel: false,  
        confirmText: "我知道了",  
        success() {  
            getImageMP(signUpForm);  
        }  
    })  
    // #endif  
    // #ifdef APP-PLUS  
    getImage(signUpForm);  
    // #endif  
}  
function getImage(signUpForm) {  
    uni.chooseImage({ // 从相册选择图片  
        count: 1,  
        crop: {  
            width: 500,  
            height: 500,  
            resize: true,  
        },  
        sizeType: "original",  
        success: (e) => { // 这里存在一个bug，在自定义调试基座下，如果是从相册中选择的照片，无法在头像位置显示。  
            console.log(e);  

            signUpForm.avatar = e.tempFilePaths[0]; // 将临时的文件路径放到头像中  
        },  
        fail: (e) => {  
            console.log(e);  
            if (e.errCode !== 0) {  
                uni.showToast({  
                    icon: 'none', // 无图标  
                    position: 'bottom', // 显示位置在屏幕下方，仅APP有效  
                    title: "获取图片失败",  
                })  
            }  
        }  
    })  
}

操作步骤： 制作自定义调试基座（代码和标准基座相同），在image标签中无法显示使用uni.chooseImage这个API拿到的相册中的图片。

预期结果： 正常显示

实际结果： 不显示图片

bug描述： 在页面中image标签上,无法展示file:///storage开头的图片。图片是通过uni.chooseImage这个API获取的相册图片，但是得到的图片路径并不是一个临时路径，而是一个永久路径，比如file:///storage/emulated/0/Pictures/DImage/1627270454089.jpg，在自定义调试基座中无法展示这一图片，但是在标准基座中可以展示。不知道是那里bug


更多关于uni-app自定义基座无法显示image标签中的file:///storage开头路径图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app自定义基座无法显示image标签中的file:///storage开头路径图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在自定义调试基座中无法显示 file:///storage 开头的本地图片路径，这通常是由于 Android 系统的文件权限限制导致的。标准基座默认拥有完整的存储权限，而自定义基座可能需要手动配置权限。

解决方案：

  1. 检查 Android 权限配置 在 manifest.json 的 App 模块配置 中，确保已勾选 Android 权限配置 下的 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> 和 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>。自定义基座需要显式声明这些权限才能访问设备存储。

  2. 动态申请存储权限 在 Android 6.0+ 设备上，即使 manifest 中声明了权限，仍需在运行时动态申请。在调用 uni.chooseImage 前，先使用 uni.authorize 或 uni.requestAuthorization 申请存储权限：

    uni.authorize({
    scope: 'scope.writePhotosAlbum',
    success() {
        getImage(signUpForm);
    },
    fail() {
        uni.showModal({
            title: '权限提示',
            content: '需要存储权限才能选择图片',
            showCancel: false
        });
    }
});

  3. 使用临时路径转换 uni.chooseImage 返回的 tempFilePaths 在某些 Android 版本上可能直接返回本地文件路径而非临时路径。可以尝试通过 uni.getFileSystemManager() 或 plus.io 接口将文件复制到应用私有目录：

    const tempPath = e.tempFilePaths[0];
const newPath = plus.io.convertLocalFileSystemURL(tempPath);
signUpForm.avatar = newPath;
回到顶部