How can I change `embed` element for `img` element in rich text image Wagtail API response?

Question

I'm using the Wagtail API to retrieve data of the pages from my site. The problem I'm having is that when there is an image inside a rich text block and I retrieve it using the API, the body attribute has the shape:

"body": [
        {
            "type": "rich_text",
            "value": "<p>some text</p>\n<p><embed alt=\"Some alt text"\" embedtype=\"image\" format=\"fullwidth\" id=\"68810\"/></p>"
        },

It means, the API returns an embed element instead of an img element with the source of the image, I want to change this response by having the img element.

I haven't tried anything yet because I don't know where to start.

Answer 1

I resolved it by adding a custom serializer:

from rest_framework.fields import ReadOnlyField
from wagtail.rich_text import expand_db_html


class BlogPostBodySerializer(ReadOnlyField):
    def to_representation(self, instance):
        representation = super().to_representation(instance)
        return expand_db_html(representation)

and then pointing to it from the APIField in the model definition:

APIField("body", serializer=BlogPostBodySerializer()),