From 8c9190b05459a0562832bbdf1dc7bcd51910718c Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sun, 23 Nov 2025 09:19:36 +0100
Subject: [PATCH] feat: add automatic fallback to placeholder for broken
 product images
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Issue:
- Product images in database have fake URLs (wizamart.example.com) that don't exist
- Browser shows broken image icons instead of placeholder

Solution:
- Add @error handler to all product images to fallback to placeholder.svg
- When any image fails to load, automatically switch to placeholder
- Applies to: product detail page, products list, related products

Now all broken/invalid image URLs will automatically show the placeholder
instead of broken image icons.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/templates/shop/product.html  | 2 ++
 app/templates/shop/products.html | 1 +
 2 files changed, 3 insertions(+)

diff --git a/app/templates/shop/product.html b/app/templates/shop/product.html
index 04c4eb21..2515f2ff 100644
--- a/app/templates/shop/product.html
+++ b/app/templates/shop/product.html
@@ -30,6 +30,7 @@
             <div class="main-image bg-white dark:bg-gray-800 rounded-lg overflow-hidden mb-4">
                 <img
                     :src="selectedImage || '/static/shop/img/placeholder.svg'"
+                    @error="selectedImage = '/static/shop/img/placeholder.svg'"
                     :alt="product?.marketplace_product?.title"
                     class="w-full h-auto object-contain"
                     style="max-height: 600px;"
@@ -187,6 +188,7 @@
                     <a :href="`{{ base_url }}shop/products/${related.id}`">
                         <img
                             :src="related.marketplace_product?.image_link || '/static/shop/img/placeholder.svg'"
+                            @error="$el.src = '/static/shop/img/placeholder.svg'"
                             :alt="related.marketplace_product?.title"
                             class="w-full h-48 object-cover"
                         >
diff --git a/app/templates/shop/products.html b/app/templates/shop/products.html
index 5e17730e..dfd44ae9 100644
--- a/app/templates/shop/products.html
+++ b/app/templates/shop/products.html
@@ -75,6 +75,7 @@
                 <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow overflow-hidden">
                     <a :href="`{{ base_url }}shop/products/${product.id}`">
                         <img :src="product.marketplace_product?.image_link || '/static/shop/img/placeholder.svg'"
+                             @error="$el.src = '/static/shop/img/placeholder.svg'"
                              :alt="product.marketplace_product?.title"
                              class="w-full h-48 object-cover">
                     </a>