Блог

Недавно я начал создавать сайты с Next.js, и я использовал сочетание Image и img для различных случаев использования.

Я знаю, что Image это встроено Next.js и является лучшим выбором, но есть сценарии, в которых я не знаю размер или соотношение загружаемых изображений, и, следовательно img , кажется, что это лучше подходит.

Во время моего недавнего проекта это первый случай, когда моя npm run build команда терпит неудачу с:

 1:7  Error: Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.
 

Мой другой Next.js проекты не терпят неудачу таким образом, и используют то же next.config.js самое . Кто — нибудь знает, почему это происходит?

Это связано с новым Next.js релиз, который интегрировал ESLint со своим собственным набором правил для обеспечения соблюдения, которые <Image> всегда следует использовать. Ваши другие проекты не проваливаются, потому что, вероятно, вы не используете Next.js v11, или у них может быть своя собственная конфигурация ESLint, в которой вы не расширили next . Ссылка.: nextjs.org/docs/basic-features/eslint

Вы можете игнорировать линтинг во время сборки с помощью этого:

 // next.config.js

module.exports = {
  eslint: { ignoreDuringBuilds: true },
  // your other settings here ...
}
 

Если вы хотите специально отключить правило для файла или просто строки, сделайте это: (можно сделать в два клика, если использовать расширение ESLint в VSCode)

 {/* eslint-disable-next-line @next/next/no-img-element */}
<img ... //>

// for whole file, add this to top:

/* eslint-disable @next/next/no-img-element */

// for a section:

/* eslint-disable @next/next/no-img-element */
// your code here...
/* eslint-enable @next/next/no-img-element */
 

Вы также можете отключить это правило с помощью .eslintrc :

 {
  "extends": "next",
  "rules": {
    "@next/next/no-img-element": "off",
  }
}
 

Вы также можете игнорировать (все правила для) полного файла, используя eslintignore или ignorePatterns . Пожалуйста, обратитесь: eslint.org/docs/user-guide/configuring/ignoring-code