0

I am getting a HTML data directly from an API, ComicVine to be exact. And when loading the description of a character, the first 2 images are loading with a normal src value, but as of the third image, the src value starts to be of 'data/image/gif...' and these are not loading, just a blank square where the image should be.

This is the div with description html:

<div dangerouslySetInnerHTML={{ __html: character.description }} />

EDIT:

This is how the first 2 images are loading inside description:

<figure data-align="right" data-size="medium" data-img-src="https://static.comicvine.com/uploads/original/0/229/79548-18133-wolverine.jpg" data-ref-id="1300-79548" data-ratio="1.288" data-width="250" data-embed-type="image" style="width: 250px">
 <a class="fluid-height" style="padding-bottom:128.8%" href="https://static.comicvine.com/uploads/original/0/229/79548-18133-wolverine.jpg" data-ref-id="1300-79548">
  <img alt="No Caption Provided" src="https://comicvine.gamespot.com/a/uploads/original/0/229/79548-18133-wolverine.jpg" srcset="https://comicvine.gamespot.com/a/uploads/original/0/229/79548-18133-wolverine.jpg 250w" sizes="(max-width: 250px) 100vw, 250px" data-width="250">
 </a>
</figure>

This is the kind of image not loading:

<figure data-align="right" data-size="small" data-ref-id="1300-1863610" data-img-src="https://static.comicvine.com/uploads/original/4/49076/1863610-logan_wwi.jpg" data-ratio="0.5225" data-width="400" data-embed-type="image" style="width: 400px">
 <a class="fluid-height" style="padding-bottom:52.3%" href="https://static.comicvine.com/uploads/original/4/49076/1863610-logan_wwi.jpg" data-ref-id="1300-1863610">
  <img alt="Logan in the Great War" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" sizes="(max-width: 320px) 100vw, 320px" data-width="320" class="js-lazy-load-image" data-src="https://comicvine.gamespot.com/a/uploads/scale_small/4/49076/1863610-logan_wwi.jpg" data-srcset="https://comicvine.gamespot.com/a/uploads/original/4/49076/1863610-logan_wwi.jpg 400w, https://comicvine.gamespot.com/a/uploads/scale_small/4/49076/1863610-logan_wwi.jpg 320w">
   <noscript><img alt="Logan in the Great War" src="https://comicvine.gamespot.com/a/uploads/scale_small/4/49076/1863610-logan_wwi.jpg" srcset="https://comicvine.gamespot.com/a/uploads/original/4/49076/1863610-logan_wwi.jpg 400w, https://comicvine.gamespot.com/a/uploads/scale_small/4/49076/1863610-logan_wwi.jpg 320w" sizes="(max-width: 320px) 100vw, 320px" data-width="320">
  </noscript>
 </a>
 <figcaption>Logan in the Great War</figcaption>
</figure>

And since I'm getting this from a json extracted from a 3th party API, I can't edit the content of it that easily (I guess).

Tobias Rosa
  • 41
  • 6
  • [Is your image properly encoded as base64?](https://stackoverflow.com/questions/42395034/how-to-display-binary-data-as-image-in-react). Note: your example is for [the smallest possible transparent gif](https://stackoverflow.com/questions/9126105/blank-image-encoded-as-data-uri) in case you weren't aware. – Andy Oct 03 '21 at 16:12
  • Actually I'm getting a full html text, which is the description of a character (in this example it's the wolverine), I'm gonna edit with a full example of the two images. – Tobias Rosa Oct 03 '21 at 16:25
  • If the markup is being sent that way directly from the API, the best alternative in my opinion would be to force the "src" value to match the "data-src" value for the images that do not load. In order to discern this, you could check images that do not include "https" inside their "src" attribute value. And I would also contact the API provider to provide clearance on why you are being served images with no valid "src" value. – Juan Chaher Oct 04 '21 at 18:20

0 Answers0