image not fond des cadexu quand image arrive pas a charger

Author: clement4444

compose.dev.yaml

@@ -5,6 +5,7 @@ services:
     build: ./frontend
     volumes:
       - ./frontend/src/:/app/src/
+      - ./frontend/public/:/app/public/
     healthcheck:
       test: [ "CMD-SHELL", "curl --fail --request GET --url 'http://localhost:${FRONTEND_PORT}' || exit 1" ]
       interval: 10s

frontend/public/images/gift-not-find.png

@@ -3,6 +3,7 @@ import type { Gift } from "../../types/Gift";
 import Icon from "../utils/Icon";
 import "./giftcard.css";
 import "./Wishlist.css";
+import { useEffect, useState } from "react";
 
 type GiftCardProps = {
   gift: Gift;
@@ -14,6 +15,16 @@ type GiftCardProps = {
 
 export default function GiftCard({ gift, className, onEdit, onDelete }: GiftCardProps) {
   const { name, description, imageUrl, url } = gift;
+  const [errorImageUrl, setErrorImageUrl] = useState(false);
+
+  useEffect(() => {
+    if (imageUrl) {
+      const img = new Image();
+      img.src = imageUrl;
+      img.onerror = () => setErrorImageUrl(true);
+      img.onload = () => setErrorImageUrl(false);
+    }
+  }, [imageUrl]);
 
   return (
     <div
@@ -26,7 +37,11 @@ export default function GiftCard({ gift, className, onEdit, onDelete }: GiftCard
       {url ? (
         <a href={url} target="_blank" rel="noopener noreferrer" className="block">
           {imageUrl ? (
-            <img src={imageUrl} alt={name} className="w-full h-40 object-cover" />
+            <img
+              src={errorImageUrl ? "/images/gift-not-find.png" : imageUrl}
+              alt={name}
+              className={`w-full h-40 ${errorImageUrl ? "object-contain" : "object-cover"}`}
+            />
           ) : (
             <div className="flex items-center justify-center w-full h-40 bg-[#FDFBF6]">
               <Icon icon="gift" className="text-9xl text-[#EA4B09] opacity-70" />
@@ -40,7 +55,11 @@ export default function GiftCard({ gift, className, onEdit, onDelete }: GiftCard
       ) : (
         <div>
           {imageUrl ? (
-            <img src={imageUrl} alt={name} className="w-full h-40 object-cover" />
+            <img
+              src={errorImageUrl ? "/images/gift-not-find.png" : imageUrl}
+              alt={name}
+              className={`w-full h-40 ${errorImageUrl ? "object-contain" : "object-cover"}`}
+            />
           ) : (
             <div className="flex items-center justify-center w-full h-40 bg-[#FDFBF6]">
               <Icon icon="gift" className="text-9xl text-[#EA4B09] opacity-70" />