s3

frontend/src/pages/ItemDetail.tsx

@@ -3,6 +3,7 @@ import { useParams, useNavigate } from "react-router-dom";
 import { Item, Rental } from "../types";
 import { useAuth } from "../contexts/AuthContext";
 import { itemAPI, rentalAPI } from "../services/api";
+import { getPublicImageUrl } from "../services/uploadService";
 import GoogleMapWithRadius from "../components/GoogleMapWithRadius";
 import ItemReviews from "../components/ItemReviews";
 import ConfirmationModal from "../components/ConfirmationModal";
@@ -417,13 +418,14 @@ const ItemDetail: React.FC = () => {
               {item.imageFilenames.length > 0 ? (
                 <div className="mb-4">
                   <img
-                    src={item.imageFilenames[selectedImage]}
+                    src={getPublicImageUrl(item.imageFilenames[selectedImage])}
                     alt={item.name}
                     className="img-fluid rounded mb-3"
                     style={{
                       width: "100%",
                       maxHeight: "500px",
-                      objectFit: "cover",
+                      objectFit: "contain",
+                      backgroundColor: "#f8f9fa",
                     }}
                   />
                   {item.imageFilenames.length > 1 && (
@@ -431,7 +433,7 @@ const ItemDetail: React.FC = () => {
                       {item.imageFilenames.map((image, index) => (
                         <img
                           key={index}
-                          src={image}
+                          src={getPublicImageUrl(image)}
                           alt={`${item.name} ${index + 1}`}
                           className={`rounded cursor-pointer ${
                             selectedImage === index