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.
40 lines
902 B
40 lines
902 B
2 years ago
|
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
|