From 72019f9cb70fe58110f7025e82246eb53b98421b Mon Sep 17 00:00:00 2001
From: Hendrik <hsiegeln@gmx.net>
Date: Fri, 17 Apr 2026 17:03:13 +0200
Subject: [PATCH] fix(ui): show remote image URL in preview, local file after
 save

In the preview flow, recipe.image_path is still the external recipe-page
URL (we only download the image when persisting). The RecipeView
component always prefixed with /images/ and produced a 404.

Now RecipeView detects http(s):// prefix and uses it directly, else
treats the value as a local filename under /images/.

Also adds referrerpolicy=no-referrer on the preview image so remote
CDNs don't block us based on Origin.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/RecipeView.svelte | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/RecipeView.svelte b/src/lib/components/RecipeView.svelte
index 6b90c55..70de7fd 100644
--- a/src/lib/components/RecipeView.svelte
+++ b/src/lib/components/RecipeView.svelte
@@ -18,6 +18,16 @@
 
   let tab = $state<'ing' | 'prep'>('ing');
 
+  // In preview, image_path is still an external URL; after save, it's a local
+  // filename served under /images/. Detect absolute URLs and pass through.
+  const imageSrc = $derived(
+    recipe.image_path === null
+      ? null
+      : /^https?:\/\//i.test(recipe.image_path)
+        ? recipe.image_path
+        : `/images/${recipe.image_path}`
+  );
+
   function decr() {
     if (servings > 1) servingsOverride = servings - 1;
   }
@@ -47,8 +57,8 @@
 
 <article class="recipe">
   <header class="hdr">
-    {#if recipe.image_path}
-      <img src={`/images/${recipe.image_path}`} alt="" class="cover" loading="eager" />
+    {#if imageSrc}
+      <img src={imageSrc} alt="" class="cover" loading="eager" referrerpolicy="no-referrer" />
     {/if}
     <div class="hdr-body">
       <h1>{recipe.title}</h1>