closes #3793

modules/docs/src/Volo.Docs.Web/HtmlConverting/HtmlNormalizer.cs

@@ -35,5 +35,51 @@ namespace Volo.Docs.HtmlConverting
         {
             return Regex.Replace(content, "<code class=\"" + currentLanguage + "\">", "<code class=\"" + newLanguage + "\">", RegexOptions.IgnoreCase);
         }
+
+        /// <summary>
+        /// Wraps an image with a tag that's clickable to open the image in a new browser tab.
+        /// </summary>
+        public static string WrapImagesWithinAnchors(string html)
+        {
+            try
+            {
+                return Regex.Replace(html, "<img.+?src=[\"'](.+?)[\"'].*?>", match =>
+                {
+                    var link = match.Groups[1].Value;
+                    var imgTag = match.Groups[0].Value;
+                    var title = GetTitleFromTag(imgTag);
+
+                    return $"<a target = \"_blank\" rel=\"noopener noreferrer\" title=\"{title}\" href=\"{link}\"><img src=\"{link}\" alt=\"{title}\"></a>";
+                });
+
+            }
+            catch
+            {
+                // ignored
+                return html;
+            }
+        }
+
+        private static string GetTitleFromTag(string imgTag)
+        {
+            if (string.IsNullOrWhiteSpace(imgTag))
+            {
+                return null;
+            }
+
+            var match = Regex.Match(imgTag, @"\stitle\s?\=\s?(\""|')(.+?)(\""|')", RegexOptions.Multiline);
+            if (match.Success && match.Groups.Count > 2)
+            {
+                return match.Groups[2].ToString().Trim();
+            }
+
+            match = Regex.Match(imgTag, @"\salt\s*\=\s*(\""|')(.*?)(\""|')", RegexOptions.Multiline);
+            if (match.Success && match.Groups.Count > 2)
+            {
+                return match.Groups[2].ToString().Trim();
+            }
+
+            return null;
+        }
     }
 }

modules/docs/src/Volo.Docs.Web/Markdown/MarkdownDocumentToHtmlConverter.cs

@@ -44,7 +44,10 @@ namespace Volo.Docs.Markdown
                 languageCode
             );
 
-            return _markdownConverter.ConvertToHtml(content);
+            var html = _markdownConverter.ConvertToHtml(content);
+
+            return html;
+            //  return HtmlNormalizer.WrapImagesWithinAnchors(html);
         }
 
         protected virtual string NormalizeLinks(

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs

@@ -400,6 +400,8 @@ namespace Volo.Docs.Pages.Documents.Project
                 Document.LocalDirectory
             );
 
+            content = HtmlNormalizer.WrapImagesWithinAnchors(content);
+
             //todo find a way to make it on client in prismJS configuration (eg: map C# => csharp)
             content = HtmlNormalizer.ReplaceCodeBlocksLanguage(
                 content,