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:
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;
Friends I answer my own question.
The error is due to the dark reader extension that injects code when rendering and therefore this error appears. If it is disabled, the error is removed.
It does not affect the application, it only shows the error because we are in development mode.
detailed explanation of the github solution: https://github.com/vercel/next.js/discussions/40648