Nextjs Using `＜img＞` could result ... using `＜Image /＞` from `next/image` to ...

一、简介

• 在 Nextjs 发开中没有使用自带的 <Image /> 组件，而选择使用 <img /> 标签，导致报警告:

  Using <img> could result in slower LCP and higher bandwidth. Consider using <Image /> from next/image to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element

二、解决方案

方式一

• 从 Next.js 11 开始， Nextjs 开箱即用的支持了 ESLint，现在提供了一组新规则，包括 @next/next/no-img-element 规则。

  可以在 .eslintrc 文件中禁用此特定 ESLint 规则，就像其他规则一样。

  • .eslintrc.json

  {
    "extends": "next/core-web-vitals",
    "rules": {
      // 关闭 Next.js 针对 <Image> 的警告
      "@next/next/no-img-element": "off"
    }
  }
  

  • .eslintrc.js

  module.exports = {
    extends: 'next/core-web-vitals',
    rules: {
      // 关闭 Next.js 针对 <Image> 的警告
      '@next/next/no-img-element': 'off'
    }
  }
  

方式二

• 终极技能，在 next.config.js 中直接关闭 ESLint。

  附：https://www.nextjs.cn/docs/api-reference/next.config.js/ignoring-eslint

  module.exports = {
    eslint: {
      ignoreDuringBuilds: true,
    }
  }