mirror of https://github.com/kremalicious/blog.git
41 lines
841 B
TypeScript
41 lines
841 B
TypeScript
import React from 'react'
|
|
import { graphql } from 'gatsby'
|
|
import Img, { FixedObject, FluidObject } from 'gatsby-image'
|
|
import styles from './Image.module.scss'
|
|
|
|
export default function Image({
|
|
fluid,
|
|
fixed,
|
|
alt
|
|
}: {
|
|
fluid?: FluidObject
|
|
fixed?: FixedObject
|
|
alt: string
|
|
}) {
|
|
return (
|
|
<Img
|
|
className={styles.imageWrap}
|
|
backgroundColor="#dfe8ef"
|
|
fluid={fluid}
|
|
fixed={fixed}
|
|
alt={alt}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export const imageSizeDefault = graphql`
|
|
fragment ImageFluid on ImageSharp {
|
|
fluid(maxWidth: 940, quality: 85) {
|
|
...GatsbyImageSharpFluid_withWebp_noBase64
|
|
}
|
|
}
|
|
`
|
|
|
|
export const imageSizeThumb = graphql`
|
|
fragment ImageFluidThumb on ImageSharp {
|
|
fluid(maxWidth: 200, maxHeight: 85, quality: 85, cropFocus: CENTER) {
|
|
...GatsbyImageSharpFluid_withWebp_noBase64
|
|
}
|
|
}
|
|
`
|