HarmonyOS 鸿蒙Next关于在H5内使用沙箱路径显示图片失败

发布于 1周前 作者 bupafengyu 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next关于在H5内使用沙箱路径显示图片失败

APP为H5+原生混合开发，图片上传成功后，在H5内使用沙箱路径显示图片失败，请问有什么解决方法吗？

<img src="/data/storage/el2/base/haps/entry/cache/IMG_20240703_151611.jpg">


更多关于HarmonyOS 鸿蒙Next关于在H5内使用沙箱路径显示图片失败的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复
"楼主您好，H5中不能直接使用沙箱路径显示图片，可以将图片转为base64显示

ets参考代码：

import { webview } from '[@kit](/user/kit).ArkWeb';

import common from '[@ohos](/user/ohos).app.ability.common';

import fs from '[@ohos](/user/ohos).file.fs';

import { util } from '[@kit](/user/kit).ArkTS';

// 获取应用文件路径

let context = getContext(this) as common.UIAbilityContext;

let pathDir = context.filesDir; // 应用通用文件路径

let filePath = pathDir + '/picture.png'

let arrayBuff = context.resourceManager.getMediaContentSync($r('app.media.startIcon')).buffer

let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);

fs.writeSync(file.fd, arrayBuff)

fs.closeSync(file);

[@Entry](/user/Entry)

[@Component](/user/Component)

struct shaxiangtupian {

  private webviewController: webview.WebviewController = new webview.WebviewController();

  build() {

    Column() {

      Web({ src: $rawfile('shaxiangtupian.html'), controller: this.webviewController })

        .width('100%')

        .height('50%')

      Button("转base64显示图片")

      .onClick(() => {

        let filePath = pathDir + "picture.png";

        let file1 = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);

        let array: ArrayBuffer = new ArrayBuffer(fs.statSync(file1.fd).size)

        fs.readSync(file1.fd, array)

        let unit = new Uint8Array(array)

        let base64 = new util.Base64Helper();

        let mystr = "data:image/png;base64," + base64.encodeToStringSync(unit);

        let base64Str = ""myFunction(\"""" + mystr + ""\"")""

        this.webviewController.runJavaScript(base64Str)

        console.log(`wsf: resultBase64Str = ${mystr}`)

      })

    }

  }

}

H5参考代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<script>

    function myFunction(base64str) {

    var img = new Image();

    img.width = 200;

    img.height = 200;

    img.src = base64str;

    document.body.appendChild(img);

    }

</script>

</body>

</html>

更多关于HarmonyOS 鸿蒙Next关于在H5内使用沙箱路径显示图片失败的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS 鸿蒙Next在H5内使用沙箱路径显示图片失败的问题，以下是一些可能的原因及排查方向：

  1. 路径配置错误：确保图片资源放置在正确的沙箱目录下，并且路径引用正确。检查H5代码中图片路径的写法，确保与沙箱中的实际路径一致。
  2. 图片格式不支持：检查图片格式是否为鸿蒙系统支持的格式，如JPEG、PNG等。不支持的格式可能导致图片无法正常显示。
  3. 沙箱权限问题：确认应用是否具有访问沙箱及其中图片资源的权限。在鸿蒙系统中，权限管理较为严格，未获取相应权限可能导致图片显示失败。
  4. 系统缓存问题：尝试清除系统缓存或重启设备，看是否能解决问题。有时缓存问题可能导致图片加载异常。
  5. 系统BUG：由于鸿蒙Next为新系统，可能存在一些未知的BUG。建议关注华为官方发布的更新信息，看是否有相关的修复补丁。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部