javascript 如何删除警告“警告:当我在nextjs中导入图像组件时,属性样式不匹配”?

34gzjxbg  于 2023-01-07  发布在  Java
关注(0)|答案(1)|浏览(198)

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;
0yg35tkg

0yg35tkg1#

该错误是由于黑暗的读卡器扩展,激活并更改了网页的颜色,这引发了警报:因为服务器上的表示与客户端上的表示不同。如果扩展被停用,错误就消除了。
它与nextjs的Image组件无关。
更多信息:https://github.com/vercel/next.js/discussions/40648

相关问题