fix: 이미지 로드 실패 시 기본 이미지로 대체하는 로직 추가

codeit-bootcamp-frontend · Dec 8, 2024 · af422ef · af422ef
1 parent c30c5c3
commit af422ef
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 15 deletions.
diff --git a/src/pages/ItemPage/components/ItemDetailsSection.jsx b/src/pages/ItemPage/components/ItemDetailsSection.jsx
@@ -162,11 +162,13 @@ function ItemDetailsSection({ item }) {
 
   return (
     <SectionContainer>
-      {item.images && item.images.length > 0 ? (
-        <ItemImage src={item.images[0]} alt={item.name} />
-      ) : (
-        <ItemImage src={defaultImage} alt={item.name} />
-      )}
+      <ItemImage
+        src={
+          item.images && item.images.length > 0 ? item.images[0] : defaultImage
+        }
+        alt={item.name}
+        onError={(e) => (e.target.src = defaultImage)}
+      />
 
       <ItemDetailsContainer>
         <MainDetails>

diff --git a/src/pages/MarketPage/components/AllItemsSection.jsx b/src/pages/MarketPage/components/AllItemsSection.jsx
@@ -92,11 +92,16 @@ function AllItemsSection() {
       <div className="allItemsCardSection">
         {itemList?.map((item) => (
           <Link to={`/items/${item.id}`} key={item.id} className="itemCard">
-            {item.images && item.images.length > 0 ? (
-              <img src={item.images[0]} alt={item.name} className="itemImage" />
-            ) : (
-              <img src={defaultImage} alt={item.name} className="itemImage" />
-            )}
+            <img
+              src={
+                item.images && item.images.length > 0
+                  ? item.images[0]
+                  : defaultImage
+              }
+              alt={item.name}
+              className="itemImage"
+              onError={(e) => (e.target.src = defaultImage)}
+            />
             <h3 className="itemName">{item.name}</h3>
             <p className="itemPrice">{item.price.toLocaleString()}원</p>
             <div className="favoriteCount">

diff --git a/src/pages/MarketPage/components/BestItemsSection.jsx b/src/pages/MarketPage/components/BestItemsSection.jsx
@@ -43,11 +43,16 @@ function BestItemsSection() {
       <div className="bestItemsCardSection">
         {itemList?.map((item) => (
           <Link to={`/items/${item.id}`} key={item.id} className="itemCard">
-            {item.images && item.images.length > 0 ? (
-              <img src={item.images[0]} alt={item.name} className="itemImage" />
-            ) : (
-              <img src={defaultImage} alt={item.name} className="itemImage" />
-            )}
+            <img
+              src={
+                item.images && item.images.length > 0
+                  ? item.images[0]
+                  : defaultImage
+              }
+              alt={item.name}
+              className="itemImage"
+              onError={(e) => (e.target.src = defaultImage)}
+            />
             <h3 className="itemName">{item.name}</h3>
             <p className="itemPrice">{item.price.toLocaleString()}원</p>
             <div className="favoriteCount">