Nextjs Using `<img>` could result ... using `<Image />` from `next/image` to ...

2024-08-01 218 阅读1分钟

一、简介

在 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: nextjs.org/docs/messag… @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。

附：www.nextjs.cn/docs/api-re…
```
module.exports = {
  eslint: {
    ignoreDuringBuilds: true,
  }
}
```