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;
1条答案
按热度按时间0yg35tkg1#
该错误是由于黑暗的读卡器扩展,激活并更改了网页的颜色,这引发了警报:因为服务器上的表示与客户端上的表示不同。如果扩展被停用,错误就消除了。
它与nextjs的Image组件无关。
更多信息:https://github.com/vercel/next.js/discussions/40648