A la hora de importar una imagen con el componente Image de nextjs me sale la siguiente advertencia:
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)
Ya he intentado importando dinámicamente, agregando un archivo .babelrc y colocándole un loader al componente y nada.
"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"
}
Código:
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;