fix(ui): show remote image URL in preview, local file after save
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 51s

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>
This commit is contained in:
2026-04-17 17:03:13 +02:00
parent 570a524d86
commit 72019f9cb7

View File

@@ -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>