image optimization. Image resizing client side, index added to db, pagination
This commit is contained in:
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user