鸿蒙Next H5展示沙箱图片出现err_access_denied错误怎么办

在鸿蒙Next开发过程中，H5页面使用沙箱展示图片时出现err_access_denied错误，该如何解决？具体表现为：通过Web组件加载本地或网络图片时，控制台报错"Access to the resource is denied"，但图片路径确认无误。已在config.json中配置了ohos.permission.INTERNET和ohos.permission.READ_MEDIA权限，问题依旧存在。想知道是否需要对沙箱环境进行特殊配置，或者有其他隐藏的权限需要申请？

2 回复

哈哈，这错误就像门卫大爷拦着不让进！试试这几招：

  1. 检查沙箱权限配置，别让图片被“关禁闭”
  2. 确认图片路径是不是在玩捉迷藏
  3. 给H5文件加个跨域访问的小绿帽
  4. 重启IDE，程序员祖传秘方

记得先看控制台报错详情，对症下药！

更多关于鸿蒙Next H5展示沙箱图片出现err_access_denied错误怎么办的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，H5展示沙箱图片出现err_access_denied错误，通常是由于文件访问权限限制或路径配置问题导致的。以下是具体解决方案：

1. 检查文件路径与权限配置

  • 确认文件路径正确：确保H5中引用的图片路径在沙箱内有效（例如使用internal://app/或external://app/前缀）。
  • 添加文件访问权限： 在 module.json5 配置文件中声明存储权限：
    {
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.READ_MEDIA",
        "reason": "需要读取沙箱图片"
      },
      {
        "name": "ohos.permission.WRITE_MEDIA",
        "reason": "需要写入沙箱图片"
      }
    ]
  }
}

2. 使用正确的沙箱路径访问

  • 通过鸿蒙的文件管理API获取沙箱路径，避免硬编码路径错误：
    import fileio from '[@ohos](/user/ohos).fileio';
import featureAbility from '[@ohos](/user/ohos).ability.featureAbility';

// 获取沙箱目录路径
const context = featureAbility.getContext();
const filesDir = await context.getFilesDir();

// 拼接图片路径（示例：沙箱内图片名为 "image.png"）
const imagePath = `${filesDir}/image.png`;

3. H5中通过安全方式加载图片

  • 将沙箱图片转换为Base64或Blob URL供H5使用：
    // 读取图片文件并转换为Base64
const file = await fileio.open(imagePath, fileio.OpenMode.READ_ONLY);
const stat = await fileio.stat(imagePath);
const buffer = new ArrayBuffer(stat.size);
await fileio.read(file.fd, buffer);
const base64 = bufferToString(buffer); // 需实现ArrayBuffer转Base64

// 在H5中通过<img src="data:image/png;base64,...">显示

4. 检查Web组件的权限设置

  • 若通过Web组件加载H5，需启用文件访问权限：
    <Web
  ...
  fileAccessEnabled="true"
  javaScriptEnabled="true"
/>

总结步骤

  1. 声明权限：在配置文件中添加读写权限。
  2. 验证路径：使用API动态获取沙箱路径。
  3. 转换资源：将沙箱图片转为Base64或Blob供H5使用。
  4. 配置Web组件：启用文件访问功能。

若问题仍存在，检查沙箱目录是否被意外清理，或尝试用fileio.access()验证文件可读性。

回到顶部