JS将内容里面的图片相对地址换成网络地址

在小程序里渲染富文本时，经常遇到内容中的图片显示不出来的情况。排查后发现，图片地址是相对路径（比如 /uploads/a.jpg），而小程序没有网页那样的域名上下文，无法自动补全，于是图片全部加载失败。解决办法是把相对地址批量转换成完整的网络地址。本文记录经过多次测试验证可行的实现方案。

一、问题成因

1. 相对路径缺少域名

浏览器的页面有明确的域名来源，/uploads/a.jpg 会被自动解析成完整地址。但小程序里的富文本渲染组件没有这个概念，拿到的字符串原样使用，自然找不到资源。

2. 图片地址格式不统一

同一个内容里，图片地址可能是 /uploads/xx.jpg、./xx.jpg，也可能是完整地址。批量处理时如果不考虑这些差异，替换结果就会出现双域名或漏替换的情况。

二、实现思路

1. 提取所有图片地址

先用正则匹配出内容中所有 img 标签的 src，逐条判断是否已经是完整地址。已经是 http 开头的不做处理，其余统一补上前缀。

2. 拼接域名前缀

对相对路径统一拼接站点域名。注意要先处理 / 开头与不以 / 开头两种写法，避免拼出 https://site.com//uploads 这类双斜杠地址。

三、关键代码与注意事项

1. 处理顺序很重要

替换时要先判断是否已包含域名，再决定是否拼接。先替换后判断会导致完整地址被二次拼接，形成错误链接。

2. 处理结果校验

替换完成后建议抽几条地址实际访问验证，确认返回 200。小程序端图片加载失败往往不会报错，只能靠结果校验发现。

3. 批量处理与性能

如果内容篇幅很长、图片数量多，建议一次性提取全部地址后统一替换，而不是逐张处理。逐张替换会在长字符串上反复扫描，效率低且容易出现漏改。统一替换后只需再整体校验一次，逻辑更清晰，也更容易排查问题。

关键配置提示

• 已经是完整地址的图片不要重复拼接域名
• 处理 / 开头与相对路径两种写法，避免出现双斜杠
• 替换后抽查图片地址可访问性，防止静默失败