How do I remove warning "Warning: Prop `style` did not match" when I import Image component in nextjs?

Friends when importing an image with the Image component of nextjs I get the following warning:

Warning: Prop style did not match. Server: "display: block; max-width: 100%; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; --darkreader-inline-bgimage:none; --darkreader-inline-bgcolor: initial; --darkreader-inline-border-top: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial;" Client: "display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" at img at span at span at Image (webpack-internal:///./node_modules/next/dist/client/image.js:50:20) at LoadableImpl (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:142:5) at a at LinkComponent (webpack-internal:///./node_modules/next/dist/client/link.js:108:19) at div at header at div at Header at div at Layout (webpack-internal:///./components/Layout.js:15:23) at div at Home at MyApp (webpack-internal:///./pages/_app.js:18:24) at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742) at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635) at Container (webpack-internal:///./node_modules/next/dist/client/index.js:111:5) at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:300:24) at Root (webpack-internal:///./node_modules/next/dist/client/index.js:508:25)

I have already tried importing dynamically, adding a .babelrc file and placing a loader on the component and nothing.

I would appreciate your help. Thank you very much.

  "dependencies": {
    "babel-preset-next": "^1.4.0",
    "next": "12.3.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^2.0.7",
    "eslint": "8.23.1",
    "eslint-config-next": "12.3.0"
  }

code:

import Image from "next/image"
    import Link from "next/link";
    import dynamic from 'next/dynamic';
    // const Images = dynamic(() => import('next/image'));
    
    import styles from "../styles/Header.module.css";
    
    const Header = () => {
    
      return (
        <div>
          <header className={styles.header}>
            <div className={`container ${styles.menuLogo}`}>
              <Link href="/">
                <a>
                  <Image
                    src="/blog-img.svg"
                    width={190}
                    height={120}
                    alt="logo"
                  />
                </a>
              </Link>
          </header>
        </div>
      );
    };
    
   export default Header;

Solution

The error is due to the dark reader extension, which had it activated and changed the color of the web page and this raised the alarm: since the representation on the server is not the same on the client. If the extension is deactivated, the error is eliminated.

It has nothing to do with the Image component of nextjs.

more information: https://github.com/vercel/next.js/discussions/40648