You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
902 B
39 lines
902 B
import { getStrapiMedia } from "utils/media" |
|
import Image from "next/image" |
|
import PropTypes from "prop-types" |
|
import { mediaPropTypes } from "utils/types" |
|
|
|
const NextImage = ({ media, ...props }) => { |
|
const { url, alternativeText, width, height } = media.data.attributes |
|
|
|
const loader = ({ src, width }) => { |
|
return getStrapiMedia(src) |
|
} |
|
|
|
// The image has a fixed width and height |
|
if (props.width && props.height) { |
|
return ( |
|
<Image loader={loader} src={url} alt={alternativeText || ""} {...props} /> |
|
) |
|
} |
|
|
|
// The image is responsive |
|
return ( |
|
<Image |
|
loader={loader} |
|
layout="responsive" |
|
width={width || "100%"} |
|
height={height || "100%"} |
|
objectFit="contain" |
|
src={url} |
|
alt={alternativeText || ""} |
|
/> |
|
) |
|
} |
|
|
|
Image.propTypes = { |
|
media: mediaPropTypes.isRequired, |
|
className: PropTypes.string, |
|
} |
|
|
|
export default NextImage
|
|
|