perf: use OptimizedImage in ReviewsBlock
This commit is contained in:
@@ -11,6 +11,7 @@ import { useQuery } from '@tanstack/react-query'
|
|||||||
import { Link as RouterLink } from 'react-router-dom'
|
import { Link as RouterLink } from 'react-router-dom'
|
||||||
import { fetchLatestApprovedReviews } from '@/entities/product/api/reviews-api'
|
import { fetchLatestApprovedReviews } from '@/entities/product/api/reviews-api'
|
||||||
import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent'
|
import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent'
|
||||||
|
import { OptimizedImage } from '@/shared/ui/OptimizedImage'
|
||||||
|
|
||||||
function initials(display: string) {
|
function initials(display: string) {
|
||||||
const s = display.trim()
|
const s = display.trim()
|
||||||
@@ -112,19 +113,28 @@ export function ReviewsBlock() {
|
|||||||
</Stack>
|
</Stack>
|
||||||
{r.imageUrl && (
|
{r.imageUrl && (
|
||||||
<Box
|
<Box
|
||||||
component="img"
|
|
||||||
src={r.imageUrl}
|
|
||||||
alt="Фото к отзыву"
|
|
||||||
sx={{
|
sx={{
|
||||||
mt: 1.5,
|
mt: 1.5,
|
||||||
width: 120,
|
width: 120,
|
||||||
height: 120,
|
height: 120,
|
||||||
objectFit: 'cover',
|
|
||||||
borderRadius: 1.5,
|
borderRadius: 1.5,
|
||||||
border: 1,
|
border: 1,
|
||||||
borderColor: 'divider',
|
borderColor: 'divider',
|
||||||
|
overflow: 'hidden',
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
<OptimizedImage
|
||||||
|
src={r.imageUrl}
|
||||||
|
alt="Фото к отзыву"
|
||||||
|
widths={[120, 320]}
|
||||||
|
sizes="120px"
|
||||||
|
sx={{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
objectFit: 'cover',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
)}
|
)}
|
||||||
</Paper>
|
</Paper>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user