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
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user