56 lines
1.4 KiB
JavaScript
56 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import CardMedia from '@mui/material/CardMedia';
|
|
import Images from './Images.js';
|
|
|
|
const ProductImage = ({
|
|
product,
|
|
fullscreenOpen,
|
|
onOpenFullscreen,
|
|
onCloseFullscreen
|
|
}) => {
|
|
// Container styling - unified for all versions
|
|
const containerSx = {
|
|
width: { xs: "100%", sm: "555px" },
|
|
maxWidth: "100%",
|
|
minHeight: "400px",
|
|
background: "#f8f8f8",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
};
|
|
|
|
return (
|
|
<Box sx={containerSx}>
|
|
{!product.pictureList && (
|
|
<CardMedia
|
|
component="img"
|
|
height="400"
|
|
image="/assets/images/nopicture.jpg"
|
|
alt={product.name}
|
|
fetchPriority="high"
|
|
loading="eager"
|
|
onError={(e) => {
|
|
// Ensure alt text is always present even on error
|
|
if (!e.target.alt) {
|
|
e.target.alt = product.name || 'Produktbild';
|
|
}
|
|
}}
|
|
sx={{ objectFit: "cover" }}
|
|
/>
|
|
)}
|
|
{product.pictureList && (
|
|
<Images
|
|
pictureList={product.pictureList}
|
|
productName={product.name}
|
|
fullscreenOpen={fullscreenOpen}
|
|
onOpenFullscreen={onOpenFullscreen}
|
|
onCloseFullscreen={onCloseFullscreen}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ProductImage;
|