fix: handle base64 images and fix amenity icon rendering
- Main images: check for base64 data URLs and render directly - Thumbnails: same base64 handling for thumbnail strip - Amenity icons: add null check and use global regex for SVG attrs - All SVGs now properly sized at 14x14 with navy color
This commit is contained in:
+36
-3
@@ -150,7 +150,22 @@ export default function RoomsPage() {
|
|||||||
|
|
||||||
const getPhoto = (room: Room, index: number): string | null => {
|
const getPhoto = (room: Room, index: number): string | null => {
|
||||||
if (!room.photos || room.photos.length === 0) return null;
|
if (!room.photos || room.photos.length === 0) return null;
|
||||||
return room.photos[Math.min(index, room.photos.length - 1)] || null;
|
const photo = room.photos[Math.min(index, room.photos.length - 1)];
|
||||||
|
if (!photo) return null;
|
||||||
|
// If it's a URL with id= param, extract id; if it's base64, return as-is
|
||||||
|
if (photo.includes('id=')) {
|
||||||
|
return photo;
|
||||||
|
}
|
||||||
|
return photo;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPhotoId = (photo: string): number | null => {
|
||||||
|
if (!photo) return null;
|
||||||
|
if (photo.includes('id=')) {
|
||||||
|
const match = photo.match(/id=(\d+)/);
|
||||||
|
return match ? parseInt(match[1]) : null;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
const getActiveIndex = (room: Room): number => {
|
const getActiveIndex = (room: Room): number => {
|
||||||
@@ -317,6 +332,13 @@ export default function RoomsPage() {
|
|||||||
{/* ─── Main Image ─── */}
|
{/* ─── Main Image ─── */}
|
||||||
<div style={{ position: 'relative', width: '100%', height: '300px' }}>
|
<div style={{ position: 'relative', width: '100%', height: '300px' }}>
|
||||||
{activeSrc ? (
|
{activeSrc ? (
|
||||||
|
activeSrc.startsWith('data:') ? (
|
||||||
|
<img
|
||||||
|
src={activeSrc}
|
||||||
|
alt={room.name}
|
||||||
|
style={{ width: '100%', height: '300px', objectFit: 'cover' }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
<OptimizedImage
|
<OptimizedImage
|
||||||
id={parseInt(activeSrc.split('id=')[1])}
|
id={parseInt(activeSrc.split('id=')[1])}
|
||||||
alt={room.name}
|
alt={room.name}
|
||||||
@@ -324,6 +346,7 @@ export default function RoomsPage() {
|
|||||||
lazy={true}
|
lazy={true}
|
||||||
style={{ width: '100%', height: '300px' }}
|
style={{ width: '100%', height: '300px' }}
|
||||||
/>
|
/>
|
||||||
|
)
|
||||||
) : (
|
) : (
|
||||||
<div style={{ width: '100%', height: '300px', background: '#ddd', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
|
<div style={{ width: '100%', height: '300px', background: '#ddd', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
|
||||||
No photo
|
No photo
|
||||||
@@ -392,6 +415,13 @@ export default function RoomsPage() {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{p ? (
|
{p ? (
|
||||||
|
p.startsWith('data:') ? (
|
||||||
|
<img
|
||||||
|
src={p}
|
||||||
|
alt=""
|
||||||
|
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
<OptimizedImage
|
<OptimizedImage
|
||||||
id={parseInt(p.split('id=')[1])}
|
id={parseInt(p.split('id=')[1])}
|
||||||
alt=""
|
alt=""
|
||||||
@@ -399,6 +429,7 @@ export default function RoomsPage() {
|
|||||||
lazy={true}
|
lazy={true}
|
||||||
style={{ width: '100%', height: '100%' }}
|
style={{ width: '100%', height: '100%' }}
|
||||||
/>
|
/>
|
||||||
|
)
|
||||||
) : (
|
) : (
|
||||||
<div style={{ width: '100%', height: '100%', background: '#ddd' }} />
|
<div style={{ width: '100%', height: '100%', background: '#ddd' }} />
|
||||||
)}
|
)}
|
||||||
@@ -432,10 +463,12 @@ export default function RoomsPage() {
|
|||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
{amenity.icon_svg ? (
|
||||||
<span
|
<span
|
||||||
style={{ display: 'inline-flex', alignItems: 'center', width: '14px', height: '14px' }}
|
style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '14px', height: '14px', color: navy }}
|
||||||
dangerouslySetInnerHTML={{ __html: amenity.icon_svg.replace(/width="[^"]*"/, 'width="14"').replace(/height="[^"]*"/, 'height="14"') }}
|
dangerouslySetInnerHTML={{ __html: amenity.icon_svg.replace(/width="[^"]*"/g, 'width="14"').replace(/height="[^"]*"/g, 'height="14"') }}
|
||||||
/>
|
/>
|
||||||
|
) : null}
|
||||||
<span>{amenity.name}</span>
|
<span>{amenity.name}</span>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user