diff --git a/src/components/editor/markdown-renderer/markdown-renderer.tsx b/src/components/editor/markdown-renderer/markdown-renderer.tsx
index 1a2b6d3a3..e2e5269d8 100644
--- a/src/components/editor/markdown-renderer/markdown-renderer.tsx
+++ b/src/components/editor/markdown-renderer/markdown-renderer.tsx
@@ -38,6 +38,7 @@ import { replaceYouTubeLink } from './regex-plugins/replace-youtube-link'
 import { ComponentReplacer, SubNodeConverter } from './replace-components/ComponentReplacer'
 import { GistReplacer } from './replace-components/gist/gist-replacer'
 import { HighlightedCodeReplacer } from './replace-components/highlighted-fence/highlighted-fence-replacer'
+import { ImageReplacer } from './replace-components/image/image-replacer'
 import { MathjaxReplacer } from './replace-components/mathjax/mathjax-replacer'
 import { PdfReplacer } from './replace-components/pdf/pdf-replacer'
 import { QuoteOptionsReplacer } from './replace-components/quote-options/quote-options-replacer'
@@ -123,6 +124,7 @@ const MarkdownRenderer: React.FC<MarkdownPreviewProps> = ({ content }) => {
       new YoutubeReplacer(),
       new VimeoReplacer(),
       new PdfReplacer(),
+      new ImageReplacer(),
       new TocReplacer(),
       new HighlightedCodeReplacer(),
       new QuoteOptionsReplacer(),
diff --git a/src/components/editor/markdown-renderer/replace-components/image/image-frame.tsx b/src/components/editor/markdown-renderer/replace-components/image/image-frame.tsx
new file mode 100644
index 000000000..b2d278b14
--- /dev/null
+++ b/src/components/editor/markdown-renderer/replace-components/image/image-frame.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const ImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({alt, ...props}) => {
+  return (
+    <img alt={alt} {...props}/>
+  )
+}
diff --git a/src/components/editor/markdown-renderer/replace-components/image/image-replacer.tsx b/src/components/editor/markdown-renderer/replace-components/image/image-replacer.tsx
new file mode 100644
index 000000000..cf459a9c5
--- /dev/null
+++ b/src/components/editor/markdown-renderer/replace-components/image/image-replacer.tsx
@@ -0,0 +1,19 @@
+import { DomElement } from 'domhandler'
+import React from 'react'
+import { ComponentReplacer } from '../ComponentReplacer'
+import { ImageFrame } from './image-frame'
+
+export class ImageReplacer implements ComponentReplacer {
+  getReplacement (node: DomElement): React.ReactElement | undefined {
+    if (node.name === 'img' && node.attribs) {
+      return <ImageFrame
+        id={node.attribs.id}
+        className={node.attribs.class}
+        src={node.attribs.src}
+        alt={node.attribs.alt}
+        width={node.attribs.width}
+        height={node.attribs.height}
+      />
+    }
+  }
+}