如何在Wagtail API V2富文本图片src中添加完整URL？

有两种常用方案可以实现将API返回的富文本中图片的相对src转换为完整URL：

方案一：自定义API富文本序列化器（仅影响API输出） #

这种方法只针对API返回的内容做处理，不会影响后台或前端页面的富文本渲染。

1. 创建自定义序列化器
   在项目中新建api/serializers.py文件，写入以下代码：

from wagtail.api.v2.serializers import BaseSerializer
from wagtail.core.rich_text import expand_db_html
from django.conf import settings
from django.utils.html import format_html

class AbsoluteURLRichTextSerializer(BaseSerializer):
    def to_representation(self, value):
        # 解析富文本为HTML
        html_content = expand_db_html(value)
        # 替换相对路径为绝对URL
        base_url = settings.SITE_URL.rstrip('/')  # 确保URL无末尾斜杠
        html_content = html_content.replace('src="/media/', f'src="{base_url}/media/')
        return format_html(html_content)

2. 在模型API字段中使用该序列化器
   修改你的models.py，在api_fields中指定富文本字段使用自定义序列化器：

from wagtail.api import APIField
from wagtail.core.models import Page
from wagtail.core.fields import RichTextField
from .api.serializers import AbsoluteURLRichTextSerializer

class YourPageModel(Page):
    body = RichTextField()

    api_fields = [
        # 为body字段指定自定义序列化器
        APIField('body', serializer=AbsoluteURLRichTextSerializer()),
        # 其他API字段...
    ]

3. 配置站点基础URL
   在settings.py中添加站点的完整URL：

SITE_URL = "https://example.com"  # 替换为你的实际域名

方案二：全局修改富文本图片渲染（影响所有富文本输出） #

如果希望后台、前端页面和API返回的富文本都使用绝对URL图片，可以通过注册富文本链接处理器实现：

1. 创建图片链接处理器
   在项目中新建wagtail_hooks.py文件，写入以下代码：

from wagtail.core.rich_text import LinkHandler
from django.conf import settings
from wagtail.core import hooks

class AbsoluteImageLinkHandler(LinkHandler):
    identifier = 'image'

    @classmethod
    def expand_db_attributes(cls, attrs):
        src = attrs.get('src', '')
        # 仅处理相对路径的图片
        if src.startswith('/'):
            src = f"{settings.SITE_URL.rstrip('/')}{src}"
        # 拼接完整的img标签
        return f'<img src="{src}" alt="{attrs.get("alt", "")}" />'

# 注册该处理器
@hooks.register('register_rich_text_features')
def register_absolute_image_handler(features):
    features.register_link_handler(AbsoluteImageLinkHandler)

2. 配置站点基础URL
   同样需要在settings.py中设置SITE_URL：

SITE_URL = "https://example.com"

注意事项 #

• 确保SITE_URL配置正确，包含协议（http/https），且没有末尾的斜杠；
• 方案一仅作用于API输出，适合只需要API返回绝对URL的场景；
• 方案二会全局修改富文本的图片渲染逻辑，包括后台编辑器预览和前端页面展示。

内容的提问来源于stack exchange，提问作者Mohammad Fathi Rahman