removed legacy objectFit property from next/image component #1534
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
✅ Tests will run for this PR. Once they succeed it can be merged. |
sashko9807
requested changes
Aug 2, 2023
There was a problem hiding this comment.
Please keep in mind that, objectFit is a valid CSS property. What the warning from issue #1529 refers to is move the objectFit, inside the style of the image component, rather than it being a prop.
So if we have <Image ..... objectFit='contain'/>
We need to move objectFit into style prop e.g.
<Image style={{objectFit: 'contain}} />
| @@ -15,7 +15,6 @@ export const AboutHeading = styled(Typography)(() => ({ | |||
| export const Avatar = styled(Image)(() => ({ | |||
| borderRadius: '50%', | |||
| textAlign: 'center', | |||
| objectFit: 'cover', | |||
| @@ -10,14 +10,14 @@ const defaultImage = { | |||
| type Props = { | |||
| height: string | |||
| src?: string | null | |||
| objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' | |||
| // objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' | |||
| @@ -29,7 +29,7 @@ export default function FeaturedImage({ | |||
| <Image | |||
| fill | |||
| sizes="100vw" | |||
| style={{ objectFit, objectPosition: defaultImage.objectPosition }} | |||
| style={{ objectPosition: defaultImage.objectPosition }} | |||
| @@ -82,7 +82,7 @@ export default function CampaignSlider({ sliderImages }: Props) { | |||
| <Root className={classes.container}> | |||
| <div style={{ textAlign: 'center' }}> | |||
| {/* A11Y TODO: Add proper alt text*/} | |||
| <Image src={sliderImages[0]} alt="campaign" height={300} width={400} objectFit="cover" /> | |||
| <Image src={sliderImages[0]} alt="campaign" height={300} width={400} /> | |||
There was a problem hiding this comment.
Move objectFit='cover' inside the style prop
| @@ -96,7 +96,7 @@ export default function CampaignSlider({ sliderImages }: Props) { | |||
| {sliderImages.map((image, index) => ( | |||
| <div key={index}> | |||
| {/* A11Y TODO: Add proper alt text*/} | |||
| <Image src={image} alt="campaign" height={300} width={400} objectFit="cover" /> | |||
| <Image src={image} alt="campaign" height={300} width={400} /> | |||
There was a problem hiding this comment.
Move objectFit='cover' inside the style prop
| @@ -21,7 +21,7 @@ export default function TeamMembersSection() { | |||
| <Image | |||
| alt="Team image" | |||
| src={teamImagePath} | |||
| style={{ maxWidth: '100%', height: 'auto', objectFit: 'contain' }} | |||
| style={{ maxWidth: '100%', height: 'auto' }} | |||
|
Alright, no problem |
|
@Nkiriobasi thanks for the contribution! |
…ge component" This reverts commit f3a3460.
github-actions
bot
removed
the
run tests
github-actions
bot
removed
the
run tests
ani-kalpachka
approved these changes
Aug 7, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #{issue number}
Motivation and context
Screenshots:
Testing
Steps to test
Affected urls
Environment
New environment variables:
NEW_ENV_VAR: env var detailsNew or updated dependencies:
dependency/namev1.0.0v2.0.0