CODEWITHSUNDEEP
reactjswagtail
Zxyao
Zxyao

Reputation: 11

Display an image upload with Wagtail in a react frontend

I have upload some images with wagtail but i can't display them in react, i have a blank space with the alternative text.

in fact, at the place of the image I have an id but i want the url to display the image.

How can i display image from wagtail to react ?

Thanks

Upvotes: 0

Views: 72

Answers (2)

MeganM
MeganM

Reputation: 56

You can do a similar thing if you're using rest_framework to manage the API. Add to you serializers.py file:

from rest_framework import serializers
from rest_framework.fields import CharField
from wagtail.rich_text import expand_db_html
from .model import MyModel

class RichTextHTMLSerializer(CharField):
    def to_representation(self, value):
        return expand_db_html(value)


class MyModelSerializer(serializers.ModelSerializer):
    appicable_field = RichTextHTMLSerializer()

    class Meta:
        model = FAQ
        fields = ["appicable_field"]

Upvotes: 0

Mohammad Fathi Rahman
Mohammad Fathi Rahman

Reputation: 137

Seems like you are fetching images from API. Add this class in your model

class APIRichTextSerializer(fields.CharField):
    def to_representation(self, instance):
        representation = super().to_representation(instance)
        return expand_db_html(representation)

Then use this as serializer to your API field,

APIField("content", serializer=APIRichTextSerializer()),

it will return the API data as a normal API response.

Upvotes: 0

Related Questions