How do i show embed image from api-CodePudding

  "content": [
                {
                    "type": "full_richtext",
                    "value": "<p data-block-key=\"a9kn6\">গেমটির কাহিনি গড়ে উঠেছে ইয়ারা নামের এক দেশকে কেন্দ্র করে। কাল্পনিক এ দেশটি শাসন করছে অ্যান্টন কাস্টিলো। নিষ্ঠুর এ শাসক সাধারণ মানুষের ওপর অত্যাচারের পাশাপাশি দেশ পরিচালনায়ও ব্যর্থ। আর তাই একসময়ের সমৃদ্ধ দেশটি অর্থনৈতিকভাবে এবং প্রযুক্তি ব্যবহারে অনেক পিছিয়ে পড়েছে। অত্যাচারী শাসকের কারণে প্রতিবেশী দেশগুলোও ইয়ারার সঙ্গে সম্পর্ক ত্যাগ করেছে। আর তাই অ্যান্টন কাস্টিলোর কাছ থেকে ইয়ারাকে মুক্ত করতে গেরিলাযুদ্ধে নামে ‘ডানি রোজাস’। এই বীর গেরিলাযোদ্ধার পরিচয়েও নিজেকে খুঁজে পাওয়া যাবে গেমটিতে।</p>",
                    "id": "c52035cd-c313-4e69-8123-98b2d2247228"
                },
                {
                    "type": "full_richtext",
                    "value": "<p data-block-key=\"a9kn6\"></p><embed alt=\"\" embedtype=\"image\" format=\"fullwidth\" id=\"4\"/><p data-block-key=\"6q2ur\"></p>",
                    "id": "516a6751-3788-44b9-a984-a81807baf455"
                },
                {
                    "type": "full_richtext",
                    "value": "<p data-block-key=\"a9kn6\">অ্যাকশননির্ভর গেমটির গ্রাফিকস খুবই উন্নত মানের। আর তাই গহিন জঙ্গলে গা ঢাকা দিয়ে অ্যান্টন কাস্টিলো বাহিনীর বিরুদ্ধে লড়াইয়ের সময় প্রতি পদে মিলবে যুদ্ধের আবহ। গেমটিতে তিনটি স্থানে গেরিলা হামলার সুযোগ মিলবে। তিনটি স্থানে হামলার সময় ভিন্ন পথে আলাদা চরিত্রের গেরিলা বাহিনীর মাধ্যমে শত্রুর বিরুদ্ধে লড়াই করতে হবে। এ সময় প্রধান ক্যাম্প পরিবর্তনের পাশাপাশি নতুন অস্ত্র, হামলার স্থান ও কৌশলে পরিবর্তন আনতে হওয়ায় প্রতিটি হামলার সময়ই মনে হবে নতুন গেম খেলছেন।</p><p data-block-key=\"4a3f3\"></p><p data-block-key=\"3j3go\">গেমটিতে গেরিলাযুদ্ধের সময় সহযোগী হিসেবে দেখা মিলবে বেশ কিছু চরিত্রের, যাদের মধ্যে জুয়ান কর্টেজ অন্যতম। যুদ্ধের ময়দানে আপনার মনোবল ঠিক রাখতে হাস্যকর বিভিন্ন ঘটনা নিয়মিত ঘটাবে মজার এ চরিত্র। এল টেগরের নাম না বললেই নয়, সাবেক এ গেরিলাযোদ্ধা অভিজ্ঞতা ও পরামর্শ দিয়ে যুদ্ধে জয়ী হতে ভূমিকা রাখবে। এ ছাড়া বিভিন্ন এলাকায় থাকা প্রধান ক্যাম্পে দেখা মিলবে বিভিন্ন চরিত্রের।<br/>ইউবিসফটের তৈরি গেমটি উইন্ডোজের পাশাপাশি প্লেস্টেশন ৪, প্লেস্টেশন ৫, এক্সবক্স ওয়ান, সিরিজ এক্স ও সিরিজ এস এবং গুগল স্ট্যাডিয়াতেও খেলা যাবে।<br/></p><h3 data-block-key=\"12s3k\"><b>কম্পিউটারে খেলতে কমপক্ষে যা লাগবে</b></h3><p data-block-key=\"1bcsg\">অপারেটিং সিস্টেম: উইন্ডোজ ১০<br/>প্রসেসর: ইন্টেল কোর আইসেভেন বা এমএমডি রাইজেন ফাইভ<br/>মেমোরি: ১৬ গিগাবাইট র‍্যাম<br/>গ্রাফিকস: ৮ গিগাবাইটের এএমডি আরএক্স ৪৬০ অথবা এনভিডিয়া জিফোর্স জিটিএক্স ৯৬০।<br/>জায়গা: ৬০ গিগাবাইট</p>",
                    "id": "7754100b-d91b-477c-92da-45cee0962dca"
                }
            ],

I have this type of array from api.

I can showed the string data, but cannot show the embedded image.

I am using below code for shown the string from the api. Help me to find out the problem, Thanks to All

<div className='Details-news-content'>
 {
   newss.content.map((data, index) => (
      <p key={index} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data.value) }}>
              </p>))}
  </div>

CodePudding user response：

It's codded in Wagtail.

In wagtail API if the content's Richtext is not serialized the API will show wired type HTML format in API.

in this case, add this code in blocks.py

from wagtail.core import blocks
from wagtail.core.templatetags.wagtailcore_tags import richtext

class RichtextBlock(blocks.RichTextBlock):

    def get_api_representation(self, value, context=None):
        return richtext(value.source)

Source: https://learnwagtail.com/tutorials/headless-cms-serializing-richtext-blocks/