在 nextjs 中導入 Image 組件時，如何刪除警告“Warning: Prop `style` did not match”？

Question

朋友們在使用 nextjs 的 Image 組件導入圖像時收到以下警告：

警告：道具style不匹配。 服務器：“顯示：塊；最大寬度：100%；寬度：初始；高度：初始；背景：無；不透明度：1；邊框：0px；邊距：0px；填充：0px；--darkreader-inline-bgimage：無；--darkreader-inline-bgcolor：初始；--darkreader-inline-border-top：初始；--darkreader-inline-border-right：初始；--darkreader-inline-border-bottom：初始；-- darkreader-inline-border-left：初始；” 客戶端：“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) 在 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) 在 ReactDevOverlay (webpack-internal:///./node_modules/next/dist /compiled/@next/react-dev-overlay/dist/client.js:8:23635) 在容器 (webpack-internal:///./node_modules/next/dist/client/index.js:111:5)在 AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:300:24 ) 在根 (webpack-internal:///./node_modules/next/dist/client/index.js:508:25)

我已經嘗試過動態導入，添加 a.babelrc 文件並在組件上放置一個加載器，但什么也沒有。

我將不勝感激你的幫助。 非常感謝你。

  "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"
  }

代碼：

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;

Answer 1

該錯誤是由於黑暗閱讀器擴展引起的，它激活並更改了 web 頁面的顏色，這引發了警報：因為服務器上的表示與客戶端上的表示不同。 如果擴展被停用，則錯誤被消除。

與nextjs的Image組件無關。

更多信息： https://github.com/vercel/next.js/discussions/40648