HarmonyOS 鸿蒙Next：web 组件中嵌入的h5网页中img设置src地址指向本应用图片

发布于 1周前 作者 bupafengyu 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：web 组件中嵌入的h5网页中img设置src地址指向本应用图片

web 组件中嵌入的h5网页中 ， img 需要设置src 地址，src 指向本应用的图片

Harmonyos Next教程
3 回复

因为安全原因不支持HTML页面访问应用的沙箱

参考以下demo

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 + '/hello.jpg'
let arrayBuff = context.resourceManager.getMediaContentSync($r('app.media.hello')).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('index.html'), controller: this.webviewController })
       .width('100%')
       .height('50%')

     Button("转base64显示图片")
       .onClick(() => {

         let filePath = pathDir + "/hello.jpg";
         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}`)
       })
   }
 }
}
// index.html
<!DOCTYPE html>
 <html>
 <meta charset="utf-8">
 <style>
 html{
 width:"100%";
 height:"100%":
 background-color: Red;
}

</style>
 <body>
 <button type="button" onclick="htmlTest()">Click Me!</button>
 <p id="demo">
 html页面
 </p>
 </body>
 <script type="text/javascript">
 function myFunction(base64str) {
   var img = new Image();
   img.width = 200;
   img.height = 200;
   img.src = base64str;
   document.body.appendChild(img);
 }
 </script>
 </html>

试试创建 file:// 地址

在HarmonyOS鸿蒙Next的web组件中嵌入h5网页时，若希望在<img>标签的src属性中指向本应用内的图片资源，通常需要确保图片资源已被正确打包进应用，并且路径设置正确。

首先，确认图片资源已放置在应用的资源目录中，例如assets或resources文件夹内（具体位置依据项目结构而定）。

接着，在h5网页的<img>标签中，src属性应设置为相对于应用资源根目录的路径。例如，如果图片位于assets/images目录下，且图片文件名为example.jpg，则src应设置为：

<img src="/assets/images/example.jpg" alt="Example Image">

注意路径前的斜杠/，它通常表示应用的根目录。如果图片资源是通过动态方式加载（例如通过JavaScript），确保路径同样正确无误。

此外，还需检查应用的配置文件（如config.json），确保对静态资源的访问权限已正确配置。

如果图片资源加载仍然失败，检查以下几点：

  • 图片文件是否已正确打包进应用。
  • 路径是否有误，包括大小写敏感问题。
  • 应用是否有足够的权限访问指定路径下的资源。

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

回到顶部