Fix img src url (#532)

* Fix img src url

* Refactor

* Cleanup

* Use Path.GetRelativePath

* Also use Path.GetRelativePath in DiagnosticLinkeInlineParser

* Format

* Add explaining comment

Author: reakaleek

src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs

@@ -6,7 +6,6 @@
 // See the license.txt file in the project root for more information.
 
 using Elastic.Markdown.Diagnostics;
-using Elastic.Markdown.Myst.CodeBlocks;
 using Elastic.Markdown.Myst.FrontMatter;
 using Elastic.Markdown.Myst.Settings;
 using Elastic.Markdown.Myst.Substitution;
@@ -85,11 +84,24 @@ protected override void Write(HtmlRenderer renderer, DirectiveBlock directiveBlo
 
 	private void WriteImage(HtmlRenderer renderer, ImageBlock block)
 	{
-		var imageUrl =
-			block.ImageUrl != null &&
-			(block.ImageUrl.StartsWith("/_static") || block.ImageUrl.StartsWith("_static"))
-				? $"{block.Build.UrlPathPrefix}/{block.ImageUrl.TrimStart('/')}"
-				: block.ImageUrl;
+		var imageUrl = block.ImageUrl;
+		if (!string.IsNullOrEmpty(block.ImageUrl))
+		{
+			if (block.ImageUrl.StartsWith('/') || block.ImageUrl.StartsWith("_static"))
+				imageUrl = $"{block.Build.UrlPathPrefix}/{block.ImageUrl.TrimStart('/')}";
+			else
+			{
+				// `block.Build.ConfigurationPath.DirectoryName` is the directory of the docset.yml file
+				// which is the root of the documentation source
+				// e.g. `/User/username/Projects/docs-builder/docs`
+				// `block.CurrentFile.DirectoryName` is the directory of the current markdown file where the image is referenced
+				// e.g. `/User/username/Projects/docs-builder/docs/page/with/image`
+				// `Path.GetRelativePath` will return the relative path to the docset.yml directory
+				// e.g. `page/with/image`
+				// Hence the full imageUrl will be something like /path-prefix/page/with/image/image.png
+				imageUrl = block.Build.UrlPathPrefix + '/' + Path.GetRelativePath(block.Build.ConfigurationPath.DirectoryName!, block.CurrentFile.DirectoryName!) + "/" + block.ImageUrl;
+			}
+		}
 		var slice = Image.Create(new ImageViewModel
 		{
 			Label = block.Label,

src/Elastic.Markdown/Myst/InlineParsers/DiagnosticLinkInlineParser.cs

@@ -258,7 +258,7 @@ private static void UpdateLinkUrl(LinkInline link, string url, ParserContext con
 	private static string GetRootRelativePath(ParserContext context, IFileInfo file)
 	{
 		var docsetDirectory = context.Configuration.SourceFile.Directory;
-		return file.FullName.Replace(docsetDirectory!.FullName, string.Empty);
+		return "/" + Path.GetRelativePath(docsetDirectory!.FullName, file.FullName);
 	}
 
 	private static bool IsCrossLink([NotNullWhen(true)] Uri? uri) =>