From a5f714f9f8a4acbb85ef9eb6d7cb01a5a160d092 Mon Sep 17 00:00:00 2001
From: Andrey Vernigora <andrey_vernigora@epam.com>
Date: Mon, 4 May 2026 21:44:24 -0700
Subject: [PATCH 1/2] Render image outputs in presentation layouts

---
 .../Components/Notebook/DashboardCell.razor            |  6 ++++++
 .../Components/Notebook/PresentationView.razor         |  6 ++++++
 src/Verso/Extensions/Layouts/PresentationLayout.cs     | 10 ++++++++++
 3 files changed, 22 insertions(+)

diff --git a/src/Verso.Blazor.Shared/Components/Notebook/DashboardCell.razor b/src/Verso.Blazor.Shared/Components/Notebook/DashboardCell.razor
index 2eb970b..203a138 100644
--- a/src/Verso.Blazor.Shared/Components/Notebook/DashboardCell.razor
+++ b/src/Verso.Blazor.Shared/Components/Notebook/DashboardCell.razor
@@ -65,6 +65,12 @@
                         @((MarkupString)output.Content)
                     </div>
                 }
+                else if (output.MimeType.StartsWith("image/"))
+                {
+                    <div class="verso-output verso-output--html">
+                        <img src="@($"data:{output.MimeType};base64,{output.Content}")" style="max-width:100%" />
+                    </div>
+                }
                 else
                 {
                     <div class="verso-output verso-output--text">
diff --git a/src/Verso.Blazor.Shared/Components/Notebook/PresentationView.razor b/src/Verso.Blazor.Shared/Components/Notebook/PresentationView.razor
index 6ad02ed..3863ad9 100644
--- a/src/Verso.Blazor.Shared/Components/Notebook/PresentationView.razor
+++ b/src/Verso.Blazor.Shared/Components/Notebook/PresentationView.razor
@@ -31,6 +31,12 @@
                             @((MarkupString)output.Content)
                         </div>
                     }
+                    else if (output.MimeType.StartsWith("image/"))
+                    {
+                        <div class="verso-output verso-output--html">
+                            <img src="@($"data:{output.MimeType};base64,{output.Content}")" style="max-width:100%" />
+                        </div>
+                    }
                     else
                     {
                         <div class="verso-output verso-output--text">
diff --git a/src/Verso/Extensions/Layouts/PresentationLayout.cs b/src/Verso/Extensions/Layouts/PresentationLayout.cs
index ed30271..42cbfc6 100644
--- a/src/Verso/Extensions/Layouts/PresentationLayout.cs
+++ b/src/Verso/Extensions/Layouts/PresentationLayout.cs
@@ -86,6 +86,16 @@ public Task<RenderResult> RenderLayoutAsync(IReadOnlyList<CellModel> cells, IVer
                     sb.Append(output.Content);
                     sb.Append("</div>");
                 }
+                else if (output.MimeType.StartsWith("image/", StringComparison.OrdinalIgnoreCase))
+                {
+                    sb.Append("<div class=\"verso-output verso-output--html\">");
+                    sb.Append("<img src=\"data:")
+                      .Append(WebUtility.HtmlEncode(output.MimeType))
+                      .Append(";base64,")
+                      .Append(WebUtility.HtmlEncode(output.Content))
+                      .Append("\" style=\"max-width:100%\" />");
+                    sb.Append("</div>");
+                }
                 else
                 {
                     sb.Append("<div class=\"verso-output verso-output--text\"><pre style=\"margin:0;white-space:pre-wrap;\">");

From 8f9bbe935c203f0cdd08c28c473faecca586fab6 Mon Sep 17 00:00:00 2001
From: Andrey Vernigora <andrey_vernigora@epam.com>
Date: Wed, 6 May 2026 21:29:17 -0700
Subject: [PATCH 2/2] Use ordinal image MIME matching

---
 src/Verso.Blazor.Shared/Components/Notebook/DashboardCell.razor | 2 +-
 .../Components/Notebook/PresentationView.razor                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Verso.Blazor.Shared/Components/Notebook/DashboardCell.razor b/src/Verso.Blazor.Shared/Components/Notebook/DashboardCell.razor
index 203a138..5e48989 100644
--- a/src/Verso.Blazor.Shared/Components/Notebook/DashboardCell.razor
+++ b/src/Verso.Blazor.Shared/Components/Notebook/DashboardCell.razor
@@ -65,7 +65,7 @@
                         @((MarkupString)output.Content)
                     </div>
                 }
-                else if (output.MimeType.StartsWith("image/"))
+                else if (output.MimeType.StartsWith("image/", StringComparison.OrdinalIgnoreCase))
                 {
                     <div class="verso-output verso-output--html">
                         <img src="@($"data:{output.MimeType};base64,{output.Content}")" style="max-width:100%" />
diff --git a/src/Verso.Blazor.Shared/Components/Notebook/PresentationView.razor b/src/Verso.Blazor.Shared/Components/Notebook/PresentationView.razor
index 3863ad9..99d9dc8 100644
--- a/src/Verso.Blazor.Shared/Components/Notebook/PresentationView.razor
+++ b/src/Verso.Blazor.Shared/Components/Notebook/PresentationView.razor
@@ -31,7 +31,7 @@
                             @((MarkupString)output.Content)
                         </div>
                     }
-                    else if (output.MimeType.StartsWith("image/"))
+                    else if (output.MimeType.StartsWith("image/", StringComparison.OrdinalIgnoreCase))
                     {
                         <div class="verso-output verso-output--html">
                             <img src="@($"data:{output.MimeType};base64,{output.Content}")" style="max-width:100%" />