seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

refactor: simplify image loading logic and enhance prerender handling in Images component

Browse Source
This commit is contained in:
sebseb7
2025-07-20 01:36:56 +02:00
parent bdd50770be
commit 1fb92e2df9
1 changed files with 33 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/Images.js
View File

@@ -52,13 +52,8 @@ class Images extends Component {
pics.push(bildId);
this.loadPic(this.props.fullscreenOpen ? 'large' : 'medium',bildId,newMainPic);
}else{
// For prerender or when sockets unavailable, use static path
if (!this.props.socket && !this.props.socketB) {
pics.push(`/assets/images/prod${bildId}.jpg`);
} else {
pics.push(bildId);
this.loadPic(this.props.fullscreenOpen ? 'large' : 'medium',bildId,newMainPic);
}
pics.push(bildId);
this.loadPic(this.props.fullscreenOpen ? 'large' : 'medium',bildId,newMainPic);
}
}else{
if(window.tinyPicCache[bildId]){
@@ -67,13 +62,8 @@ class Images extends Component {
pics.push(window.mediumPicCache[bildId]);
this.loadPic('tiny',bildId,newMainPic);
}else{
// For prerender or when sockets unavailable, use static path
if (!this.props.socket && !this.props.socketB) {
pics.push(`/assets/images/prod${bildId}.jpg`);
} else {
pics.push(null);
this.loadPic('tiny',bildId,pics.length-1);
}
pics.push(null);
this.loadPic('tiny',bildId,pics.length-1);
}
}
}
@@ -85,9 +75,6 @@ class Images extends Component {
}
loadPic = (size,bildId,index) => {
// Skip loading if sockets are not available (e.g., during prerender)
if (!this.props.socketB) return;
this.props.socketB.emit('getPic', { bildId, size }, (res) => {
if(res.success){
const url = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
@@ -112,6 +99,35 @@ class Images extends Component {
}
render() {
// Prerender detection - if no sockets, render simple CardMedia with static path
if (!this.props.socketB) {
const getImagePath = (pictureList) => {
if (!pictureList || !pictureList.trim()) {
return '/assets/images/nopicture.jpg';
}
return `/assets/images/prod${pictureList.split(',')[0].trim()}.jpg`;
};
return (
<Box sx={{ position: 'relative', display: 'inline-block' }}>
<CardMedia
component="img"
height="400"
image={getImagePath(this.props.pictureList)}
sx={{
objectFit: 'contain',
cursor: 'pointer',
transition: 'transform 0.2s ease-in-out',
'&:hover': {
transform: 'scale(1.02)'
}
}}
/>
</Box>
);
}
// SPA version - full functionality
return (
<>
{this.state.pics[this.state.mainPic] && (