diff --git a/errors/no-img-element.md b/errors/no-img-element.md
index 532dac586cb25..e53291e0e4707 100644
--- a/errors/no-img-element.md
+++ b/errors/no-img-element.md
@@ -2,7 +2,7 @@
### Why This Error Occurred
-An HTML ` ` element was used to display an image. For better performance and automatic Image Optimization, use Next.js' built-in image component instead.
+An HTML ` ` element was used to display an image. Use either `` in conjunction with ` ` element, or use Next.js' built-in image component that has better performance and automatic Image Optimization over ` `.
### Possible Ways to Fix It
@@ -27,6 +27,23 @@ function Home() {
export default Home
```
+
+
+Use `` in conjunction with ` ` element:
+
+```jsx
+function Home() {
+ return (
+ <>
+
+
+
+
+ >
+ )
+}
+```
+
### Useful Links
- [Image Component and Image Optimization](https://nextjs.org/docs/basic-features/image-optimization)
diff --git a/packages/eslint-plugin-next/lib/rules/no-img-element.js b/packages/eslint-plugin-next/lib/rules/no-img-element.js
index 8f015e59283a6..6eebffcd05d16 100644
--- a/packages/eslint-plugin-next/lib/rules/no-img-element.js
+++ b/packages/eslint-plugin-next/lib/rules/no-img-element.js
@@ -20,9 +20,15 @@ module.exports = {
return
}
+ if (node.parent?.parent?.openingElement?.name?.name === 'picture') {
+ return
+ }
+
context.report({
node,
- message: `Do not use . Use Image from 'next/image' instead. See: https://nextjs.org/docs/messages/no-img-element`,
+ message:
+ "Do not use . Use either Image from 'next/image' or in conjunction with . " +
+ 'See: https://nextjs.org/docs/messages/no-img-element',
})
},
}
diff --git a/test/unit/eslint-plugin-next/no-img-element.test.ts b/test/unit/eslint-plugin-next/no-img-element.test.ts
index 0db0d7f2a9a3d..4a4a7a7301e6c 100644
--- a/test/unit/eslint-plugin-next/no-img-element.test.ts
+++ b/test/unit/eslint-plugin-next/no-img-element.test.ts
@@ -30,6 +30,36 @@ ruleTester.run('no-img-element', rule, {
);
}
}`,
+ `export class MyComponent {
+ render() {
+ return (
+
+
+
+ );
+ }
+ }`,
+ `export class MyComponent {
+ render() {
+ return (
+
+
+
+
+
+
+ );
+ }
+ }`,
],
invalid: [
{
@@ -51,7 +81,31 @@ ruleTester.run('no-img-element', rule, {
errors: [
{
message:
- "Do not use . Use Image from 'next/image' instead. See: https://nextjs.org/docs/messages/no-img-element",
+ "Do not use . Use either Image from 'next/image' or in conjunction with . " +
+ 'See: https://nextjs.org/docs/messages/no-img-element',
+ type: 'JSXOpeningElement',
+ },
+ ],
+ },
+ {
+ code: `
+ export class MyComponent {
+ render() {
+ return (
+
+ );
+ }
+ }`,
+ errors: [
+ {
+ message:
+ "Do not use . Use either Image from 'next/image' or in conjunction with . " +
+ 'See: https://nextjs.org/docs/messages/no-img-element',
type: 'JSXOpeningElement',
},
],