sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add automatic fallback to placeholder for broken product images

Browse Source 
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>
This commit is contained in:
Samir Boulahtit
2025-11-23 09:19:36 +01:00
parent 6fa9ccb552
commit 8c9190b054
2 changed files with 3 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/templates/shop/product.html
View File

@@ -30,6 +30,7 @@
<div class="main-image bg-white dark:bg-gray-800 rounded-lg overflow-hidden mb-4"> <div class="main-image bg-white dark:bg-gray-800 rounded-lg overflow-hidden mb-4">
<img <img
:src="selectedImage || '/static/shop/img/placeholder.svg'" :src="selectedImage || '/static/shop/img/placeholder.svg'"
@error="selectedImage = '/static/shop/img/placeholder.svg'"
:alt="product?.marketplace_product?.title" :alt="product?.marketplace_product?.title"
class="w-full h-auto object-contain" class="w-full h-auto object-contain"
style="max-height: 600px;" style="max-height: 600px;"
@@ -187,6 +188,7 @@
<a :href="`{{ base_url }}shop/products/${related.id}`"> <a :href="`{{ base_url }}shop/products/${related.id}`">
<img <img
:src="related.marketplace_product?.image_link || '/static/shop/img/placeholder.svg'" :src="related.marketplace_product?.image_link || '/static/shop/img/placeholder.svg'"
@error="$el.src = '/static/shop/img/placeholder.svg'"
:alt="related.marketplace_product?.title" :alt="related.marketplace_product?.title"
class="w-full h-48 object-cover" class="w-full h-48 object-cover"
> >

1
app/templates/shop/products.html
View File

@@ -75,6 +75,7 @@
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow overflow-hidden"> <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}`"> <a :href="`{{ base_url }}shop/products/${product.id}`">
<img :src="product.marketplace_product?.image_link || '/static/shop/img/placeholder.svg'" <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" :alt="product.marketplace_product?.title"
class="w-full h-48 object-cover"> class="w-full h-48 object-cover">
</a> </a>