Why isn't styling inside the Image component in NextJS not allowing me to manipulate my image. Am I missing something?
<Image className={styles.bg}
style={{ transform: `translateY(${offset * 0.5}px)` }}
src="/../public/bg.jpg"
// width={2049}
// height={2049}
// objectFit="cover"
layout="fill"
quality={100}
/>
If Next.js version is less than 12.1.1, this will not work. Onwards there is support for canonical style prop. With the style prop in support for props like layout, objectFit, and objectPosition is removed in Next.js 13.
Other properties on the component will be passed to the underlying img element with the exception of the following:
style. Use className instead.
NextJs v12.1.1 added the style prop to next/image.
next 12 does not support styling the image tag directly, but the way to go about this is to put the image tag inside a div container, which we will apply the styling to, here is a sample
<div className={style.styling}>
<Image src={image.url} width={100} height={100} />
</div>
translateY(${offset * 0.5}px)}} src="/../public/bg.jpg" // width={2049} // height={2049} // objectFit="cover" layout="fill" quality={100} />