Skip to content

Commit

Permalink
fix(gatsby-plugin-image): Correct image styles (#28834)
Browse files Browse the repository at this point in the history
* fix(gatsby-plugin-image): Correct image styles

* Remove avif options from dom

* Remove in/delete

(cherry picked from commit 3d6446c)
  • Loading branch information
ascorbic authored and vladar committed Jan 5, 2021
1 parent f19c807 commit fe6e192
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export interface GatsbyImageProps
alt: string
as?: ElementType
className?: string
class?: string
imgClassName?: string
image: IGatsbyImageData
imgStyle?: CSSProperties
Expand Down Expand Up @@ -56,6 +57,7 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
as: Type = `div`,
style,
className,
class: preactClass,
onStartLoad,
image,
onLoad: customOnLoad,
Expand All @@ -68,6 +70,9 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
}
return null
}
if (preactClass) {
className = preactClass
}
const { width, height, layout, images } = image

const root = useRef<HTMLElement>()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const GatsbyImageHydrator: FunctionComponent<{
export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyImage({
as,
className,
class: preactClass,
style,
image,
loading = `lazy`,
Expand All @@ -32,6 +33,15 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
console.warn(`[gatsby-plugin-image] Missing image prop`)
return null
}
if (preactClass) {
className = preactClass
}
imgStyle = {
objectFit,
objectPosition,
backgroundColor,
...imgStyle,
}

const {
width,
Expand Down Expand Up @@ -97,6 +107,8 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
<MainImage
data-gatsby-image-ssr=""
sizes={sizes}
className={imgClassName}
style={imgStyle}
{...(props as Omit<MainImageProps, "images" | "fallback">)}
// When eager is set we want to start the isLoading state on true (we want to load the img without react)
{...getMainProps(loading === `eager`, false, cleanedImages, loading)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export function _getStaticImage(
jpgOptions,
pngOptions,
webpOptions,
avifOptions,
blurredOptions,
/* eslint-enable @typescript-eslint/no-unused-vars */
...props
Expand Down

0 comments on commit fe6e192

Please sign in to comment.