tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(templates): prevent image priority and lazy loading incompatibility (#10023)

Browse Source 
This PR fixes an issue in the hero banner of website templates where
`priority` was passed to `ImageMedia` component but was incompatible with
NextImage `loading="lazy"`, causing error. The fix is to add a ternary
condition to check if `priority` prop is passed before setting `loading.
This commit is contained in:
Hugo Knorr
2024-12-17 15:56:53 +01:00
committed by GitHub
parent 29ad1fcb77
commit 7037983de0
2 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/website/src/components/Media/ImageMedia/index.tsx
View File

@@ -50,7 +50,7 @@ export const ImageMedia: React.FC<MediaProps> = (props) => {
src = `${getClientSideURL()}${url}` src = `${getClientSideURL()}${url}`
} }
const loading = loadingFromProps || 'lazy' const loading = loadingFromProps || (!priority ? 'lazy' : undefined)
// NOTE: this is used by the browser to determine which image to download at different screen sizes // NOTE: this is used by the browser to determine which image to download at different screen sizes
const sizes = sizeFromProps const sizes = sizeFromProps

2
templates/with-vercel-website/src/components/Media/ImageMedia/index.tsx
View File

@@ -50,7 +50,7 @@ export const ImageMedia: React.FC<MediaProps> = (props) => {
src = `${getClientSideURL()}${url}` src = `${getClientSideURL()}${url}`
} }
const loading = loadingFromProps || 'lazy' const loading = loadingFromProps || (!priority ? 'lazy' : undefined)
// NOTE: this is used by the browser to determine which image to download at different screen sizes // NOTE: this is used by the browser to determine which image to download at different screen sizes
const sizes = sizeFromProps const sizes = sizeFromProps