uni-app uParse 富文本解析图片无法显示

uni-app uParse 富文本解析图片无法显示

操作步骤：

  • 直接用uParse 富文本解析，里面放个img标签，src放网络图片即可

预期结果：

  • 显示图片

实际结果：

  • 无法显示图片

bug描述：

  • uParse 富文本解析 内容包含img标签，但是图片无法正常显示
信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本号 win7
HBuilderX类型 Alpha
HBuilderX版本号 3.2.10
手机系统 iOS
手机系统版本号 IOS 14
手机厂商 苹果
手机机型 IPhone11 Pro
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app uParse 富文本解析图片无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

LOMO

更多关于uni-app uParse 富文本解析图片无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我的是img标签的宽高属性没有被渲染出来

是这个插件判断图片宽高出了问题， 当 图片宽度大于 窗口宽度的时候 这个插件无法获取 windowWidth 导致这个值成了 0 然后 0* 图片宽高比例… 就导致了 图片 宽高 都成了 0 这么严重一个bug 竟然官放都没发现 我tmd服了

回复 年轻经不起等待: 有解决办法吗？

怎么修复的

uParse 富文本解析组件在 uni-app 中处理图片显示时，常见问题及解决方案如下：

  1. 网络图片路径问题
    确保 img 标签的 src 为完整的 HTTPS 或 HTTP 链接（如 https://example.com/image.jpg）。部分网络环境或平台（如 iOS）可能对非 HTTPS 链接有安全限制，建议统一使用 HTTPS。

  2. 图片域名安全策略
    若图片链接为自定义域名，需在项目的 manifest.json 中配置网络请求白名单。
    示例配置（HBuilderX 中操作）：

    • 打开 manifest.json → “App 模块配置” → “网络请求” → 勾选“允许访问的域名列表”。
    • 在“域名列表”中添加图片域名（如 example.com）。

  3. uParse 组件配置
    检查是否未启用图片解析功能。确保组件配置中 img 标签未被过滤：

    <u-parse :content="htmlContent" :tag-style="tagStyle" />
回到顶部