s3

frontend/src/pages/Owning.tsx

@@ -4,6 +4,7 @@ import { useAuth } from "../contexts/AuthContext";
 import api from "../services/api";
 import { Item, Rental } from "../types";
 import { rentalAPI, conditionCheckAPI } from "../services/api";
+import { getPublicImageUrl } from "../services/uploadService";
 import ReviewRenterModal from "../components/ReviewRenterModal";
 import RentalCancellationModal from "../components/RentalCancellationModal";
 import DeclineRentalModal from "../components/DeclineRentalModal";
@@ -308,10 +309,10 @@ const Owning: React.FC = () => {
                 <div className="card h-100">
                   {rental.item?.imageFilenames && rental.item.imageFilenames[0] && (
                     <img
-                      src={rental.item.imageFilenames[0]}
+                      src={getPublicImageUrl(rental.item.imageFilenames[0])}
                       className="card-img-top"
                       alt={rental.item.name}
-                      style={{ height: "200px", objectFit: "cover" }}
+                      style={{ height: "200px", objectFit: "contain", backgroundColor: "#f8f9fa" }}
                     />
                   )}
                   <div className="card-body">
@@ -529,10 +530,10 @@ const Owning: React.FC = () => {
               >
                 {item.imageFilenames && item.imageFilenames[0] && (
                   <img
-                    src={item.imageFilenames[0]}
+                    src={getPublicImageUrl(item.imageFilenames[0])}
                     className="card-img-top"
                     alt={item.name}
-                    style={{ height: "200px", objectFit: "cover" }}
+                    style={{ height: "200px", objectFit: "contain", backgroundColor: "#f8f9fa" }}
                   />
                 )}
                 <div className="card-body">