离线打包 uni-app v-html 渲染富文本中 资源请求的显示问题

离线打包 uni-app v-html 渲染富文本中 资源请求的显示问题

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10 企业版 22H2

HBuilderX类型：正式

HBuilderX版本号：4.45

手机系统：Android

手机系统版本号：Android 15

手机厂商：小米

手机机型：K60pro

页面类型：vue

vue版本：vue3

打包方式：离线

项目创建方式：HBuilderX

App下载地址或H5网址：
[https://gitee.com/rap2017/uniapp_offline-package_richtext-resource-error](https://gitee.com/rap2017/uniapp_offline-package_richtext-resource-error)

### 示例代码：

```html
<template>    
    <view v-html="html">    
    </view>    
</template>    
<script lang="ts" setup>    
    import { computed, watch, ref } from 'vue';    
    import FileManager from '../../common/fileManager'    
    import { requestStoragePermission } from '../../utils/permissionUtils';    
    const props = defineProps<{ content : string }>()    
    const html = computed(() => `<div>${props.content}</div><style>.editor-image-item{max-width: 100%}.edui-video{max-width: 100%}</style>`)    

    const host = import.meta.env.VITE_BASE_URL    
    const cookie = plus.navigator.getCookie(host).slice(45)  // 例如：cookie = 'sessionId=318474695181627392'    
    console.log(`origin cookie: ${plus.navigator.getCookie(host)}`)    
    console.log(`target cookie: ${cookie}`)    
    plus.navigator.setCookie(host, cookie)    

        // 使用Native.js    同样在线打包正常显示，离线不显示    
    // var CookieManager = plus.android.importClass("android.webkit.CookieManager")    
    // var manager = CookieManager.getInstance()    
    // manager.setAcceptCookie(true)    
    // manager.setCookie(host, cookie)    
    // manager.flush()    

        // 原生插件    
        // const manager = uni.requireNativePlugin('richtext-manager')    
    // manager.setCookie(host, cookie, result => console.log(result))    //结果打印为true    

</script>

操作步骤：

• 使用4.29正式版sdk 离线打包;
• minSdk 21; targetSdk 34;
• 无法加载图片、视频

升级4.45正式版后效果一样。

示例连接地址

https://gitee.com/rap2017/uniapp_offline-package_richtext-resource-error

预期结果：

离线打包正常渲染富文本内的图片视频文件

实际结果：

无法正常渲染富文本内的图片视频文件

bug描述：

使用<view v-html="标签渲染一段富文本内容， 文本内有img和video标签，其资源指向的地址需要请求头内具有Cookie项，使用plus.navigator.setCookie(url, cookie)接口设置Cookie，现：

• 在线打包时能够正确显示图片、视频；离线打包时获取不到图片。
• 后尝试Native.js使用CookieManager设置Cookie，使用Android原生插件方法设置Cookie，图片均无法正常显示。

另直接使用原生<image :src=""标签时，如果不设置cookie，则照片有空白占位，不显示，点击后能够预览预览框内正常显示，退出预览后该位置依然空白不显示；设置后均正常。

使用原生<video>标签时：

• 如果不设置cookie：不使用标签内header设置cookie，组件黑屏，无法播放，无时长等数据；使用标签内header设置cookie，组件黑屏，无法播放，有时长标题等数据。
• 如果使用plus等api设置cookie，组建黑屏，无法播放，无时长等数据。

在线打包结果显示正常！

离线打包过程按官网文档仔细比对，除图片、视频外其他功能正常