8c3f8c74db
Feature/SW-3365 reduce upscaling of images (fix blurry images) * fix: handle when images are wider than 3:2 but rendered in a 3:2 container * use dimensions everywhere applicable * fall back to using <img sizes='auto' /> if possible * imageLoader: never nest * remove empty test file Approved-by: Anton Gunnarsson Approved-by: Matilda Landström
47 lines
908 B
TypeScript
47 lines
908 B
TypeScript
'use client'
|
|
|
|
import NextImage, { ImageProps as NextImageProps } from 'next/image'
|
|
|
|
import ImageFallback from '../ImageFallback'
|
|
|
|
import type { CSSProperties } from 'react'
|
|
import { imageLoader } from './imageLoader'
|
|
|
|
type FocalPoint = {
|
|
x: number
|
|
y: number
|
|
}
|
|
|
|
export type ImageProps = NextImageProps & {
|
|
focalPoint?: FocalPoint
|
|
dimensions?: { width: number; height: number }
|
|
}
|
|
|
|
// Next/Image adds & instead of ? before the params
|
|
export default function Image({
|
|
focalPoint,
|
|
dimensions,
|
|
style,
|
|
...props
|
|
}: ImageProps) {
|
|
const styles: CSSProperties = focalPoint
|
|
? {
|
|
objectFit: 'cover',
|
|
objectPosition: `${focalPoint.x}% ${focalPoint.y}%`,
|
|
...style,
|
|
}
|
|
: { ...style }
|
|
|
|
if (!props.src) {
|
|
return <ImageFallback />
|
|
}
|
|
|
|
return (
|
|
<NextImage
|
|
{...props}
|
|
style={styles}
|
|
loader={imageLoader({ dimensions, focalPoint })}
|
|
/>
|
|
)
|
|
}
|