CODEWITHSUNDEEP
reactjsmarkdownjsx
Profreak
Profreak

Reputation: 83

Image (<img) tag is not rendered when using ReactMarkdown in react js

Currently I am trying to fetch the github readme file and render it using ReactMarkdown. here is the screenshot of output/error.

there are some tag like

<p float="left"> <img src="https://github.com/username/project/blob/master/Screenshots/s1.png" width="300" hspace="40"/> </p>

So above tag does not render and gives CORB error.

My current code is

 <ReactMarkdown
          className="projectDetail__markdown"
          escapeHtml={false}
          transformImageUri={(uri) =>
            uri.startsWith("https")
              ? uri
              : `https://raw.githubusercontent.com/AlShevelev/WizardCamera/master/screenshots/5_2_small.webp`
          }
          source={markDown}
          // astPlugins={[parseHtml]}
          renderers={{ code: CodeBlock }}
        </ReactMarkdown>

I have tried use plugin but no success.

Upvotes: 0

Views: 2376

Answers (1)

Profreak
Profreak

Reputation: 83

Finally I founded the solution.

I saw CORB error in console I research about why this was happening and founded that in readme file url of images were not correct.

The readme url were https://github.com/username/project/blob/master/Screenshots/s1.png && required Url was: https://raw.githubusercontent.com/username/project/master/screenshots/s1.png

So the problem was that when we set the src for the image, we need to use a URL which points to an actual image and first url was not pointing to actual image.

this was the root cause and because of this images were not rendering.

So I write code to convert all the urls of img tags only of markdown response. https://playcode.io/666242/ complete code.

// This function will find all the links in img tag.

function getImages(string) {
  const imgRex = /<img.*?src="(.*?)"[^>]+>/g;
  const images = [];
  let img;
  while ((img = imgRex.exec(string))) {
    images.push(img[1]);
  }
  return images;
}

// This function convert the markdown text. 

const convertImgInMarkdown = (markDown) => {
  let mark = markDown;
  let imageTags = getImages(mark);
  let updatedImages = [];
  imageTags.map((image) => {
    let xx = image.split(".com");
    let y = `https://raw.githubusercontent.com` + xx[1];
    let z = y.replace("/blob", "");
    updatedImages.push(z);
  });
  for (let i = 0; i < updatedImages.length; i++) {
    mark = mark.replace(imageTags[i], updatedImages[i]);
  }
  return mark;
};

Upvotes: 2

Related Questions