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

@@ -1,6 +1,6 @@
import React from 'react';
import { Item } from '../types';
import { getPublicImageUrl } from '../services/uploadService';
import { getImageUrl } from '../services/uploadService';
interface ItemMarkerInfoProps {
item: Item;
@@ -26,9 +26,16 @@ const ItemMarkerInfo: React.FC<ItemMarkerInfoProps> = ({ item, onViewDetails })
<div className="card border-0">
{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: '120px',
objectFit: 'contain',