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

This commit is contained in:
jackiettran
2025-12-30 20:23:32 -05:00
parent 3e31b9d08b
commit 807082eebf
25 changed files with 587 additions and 123 deletions

View File

@@ -4,7 +4,7 @@ import { useAuth } from "../contexts/AuthContext";
import api from "../services/api";
import { Item, Rental, ConditionCheck } from "../types";
import { rentalAPI, conditionCheckAPI } from "../services/api";
import { getPublicImageUrl } from "../services/uploadService";
import { getImageUrl } from "../services/uploadService";
import ReviewRenterModal from "../components/ReviewRenterModal";
import RentalCancellationModal from "../components/RentalCancellationModal";
import DeclineRentalModal from "../components/DeclineRentalModal";
@@ -364,9 +364,16 @@ const Owning: 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",
@@ -617,9 +624,16 @@ const Owning: React.FC = () => {
>
{item.imageFilenames && item.imageFilenames[0] && (
<img
src={getPublicImageUrl(item.imageFilenames[0])}
src={getImageUrl(item.imageFilenames[0], 'thumbnail')}
className="card-img-top"
alt={item.name}
onError={(e) => {
const target = e.currentTarget;
if (!target.dataset.fallback) {
target.dataset.fallback = 'true';
target.src = getImageUrl(item.imageFilenames[0], 'original');
}
}}
style={{
height: "200px",
objectFit: "contain",