next js automatically adding style to it's element

Question

I have added my logo in navbar and it seems like next js is adding css automatically to that element

Here is what I got on inspecting the element

element.style {
    position: absolute;
    width: 0px;
    display: block;
    margin: auto;
    inset: 0px;
    box-sizing: border-box;
    padding: 0px;
    border: none;
    height: 0px;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
}

Where as the style I added was

const fav = {
        width: "35px",
        display: "inline",
        marginTop: "-2.3px",
      };

<Image style={fav} width="30rem" height="30rem" src={logo2} alt="Logo" />

Any further requirement I will provide

`````` from 'next/image' is the built-in performance optimizations features, that's why you got those CSS style. Please have a look here: https://nextjs.org/docs/basic-features/image-optimization — seantsang, Aug 16 '22 at 02:08
and make sure passing numbers in width and height property, i.e. "30" instead of "30rem" — seantsang, Aug 16 '22 at 02:10
That's the expected behaviour when using `next/image`, see [Next Image not taking class properties](https://stackoverflow.com/questions/65527407/next-image-not-taking-class-properties) for potential workarounds. — juliomalves, Aug 16 '22 at 21:41

score 0 · Answer 1 · answered Aug 15 '22 at 23:59

You can read in the documentation about Image component of nextjs and how its applying own styles to the image element

https://nextjs.org/docs/api-reference/next/image#style

Maybe you need to move to raw layout mode? :) https://nextjs.org/docs/api-reference/next/image#experimental-raw-layout-mode

next js automatically adding style to it's element

1 Answers1