image optimization. Image resizing client side, index added to db, pagination

frontend/src/pages/Renting.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
 import { rentalAPI, conditionCheckAPI } from "../services/api";
-import { getPublicImageUrl } from "../services/uploadService";
+import { getImageUrl } from "../services/uploadService";
 import { Rental, ConditionCheck } from "../types";
 import ReviewItemModal from "../components/ReviewModal";
 import RentalCancellationModal from "../components/RentalCancellationModal";
@@ -243,9 +243,16 @@ const Renting: React.FC = () => {
                   {rental.item?.imageFilenames &&
                     rental.item.imageFilenames[0] && (
                       <img
-                        src={getPublicImageUrl(rental.item.imageFilenames[0])}
+                        src={getImageUrl(rental.item.imageFilenames[0], 'thumbnail')}
                         className="card-img-top"
                         alt={rental.item.name}
+                        onError={(e) => {
+                          const target = e.currentTarget;
+                          if (!target.dataset.fallback && rental.item) {
+                            target.dataset.fallback = 'true';
+                            target.src = getImageUrl(rental.item.imageFilenames[0], 'original');
+                          }
+                        }}
                         style={{
                           height: "200px",
                           objectFit: "contain",