在 React js 中使用 ReactMarkdown 时不呈现图像 (<img) 标签

Question

目前我正在尝试获取 github 自述文件并使用 ReactMarkdown 呈现它。 here是output/error的截图。

有些标签像

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

所以上面的标签不会呈现并给出 CORB 错误。

我当前的密码是

 <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>

我试过使用插件但没有成功。

Answer 1

我终于找到了解决方案。

我在控制台中看到 CORB 错误我研究了为什么会发生这种情况，并发现自述文件 url 中的图像不正确。

自述文件 url 是 https://github.com/username/project/blob/master/Screenshots/s1.png && 要求 Url 是：https://raw.githubusercontent.com/username/project/master/screenshots/s1.png

所以问题是当我们为图像设置 src 时，我们需要使用指向实际图像的 URL 而第一个 url 没有指向实际图像。

这是根本原因，因此图像无法渲染。

所以我写代码只转换markdown响应的img标签的所有urls。 https://playcode.io/666242/ 完整代码。

// 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;
};

在 React js 中使用 ReactMarkdown 时不呈现图像 (<img) 标签

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

markdown

jsx

reactjs