CODEWITHSUNDEEP
javascriptreactjsnext.jsnextjs-image
AdamTzur
AdamTzur

Reputation: 435

NextJS Image component not responding to my inline css inside it

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}
      />

Upvotes: 4

Views: 2510

Answers (4)

Tushar Shahi
Tushar Shahi

Reputation: 20441

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.

Upvotes: 1

abdulkareem alabi
abdulkareem alabi

Reputation: 81

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>

Upvotes: 0

Changuitos
Changuitos

Reputation: 9

NextJs v12.1.1 added the style prop to next/image.

Upvotes: 0

Autsakorn Tanyianniti
Autsakorn Tanyianniti

Reputation: 1

Other properties on the component will be passed to the underlying img element with the exception of the following:

style. Use className instead.

Upvotes: 0

Related Questions