fix(eslint): allow <img> in conjunction with <picture> (#37504)

errors/no-img-element.md

@@ -4,7 +4,7 @@
 
 ### Why This Error Occurred
 
-An `<img>` element was used to display an image. For better performance and automatic Image Optimization, use `next/image` instead.
+An `<img>` element was used to display an image. Use either `<picture>` in conjunction with `<img>` element, or use `next/image` that has better performance and automatic Image Optimization over `<img>`.
 
 ### Possible Ways to Fix It
 
@@ -29,6 +29,23 @@ function Home() {
 export default Home
 ```
 
+<br />
+
+Use `<picture>` in conjunction with `<img>` element:
+
+```jsx
+function Home() {
+  return (
+    <>
+      <picture>
+        <source srcSet="https://example.com/test" type="image/webp" />
+        <img src="https://example.com/test" alt="Landscape picture" />
+      </picture>
+    </>
+  )
+}
+```
+
 ### Useful Links
 
 - [Image Component and Image Optimization](https://nextjs.org/docs/basic-features/image-optimization)

packages/eslint-plugin-next/lib/rules/no-img-element.js

@@ -22,6 +22,10 @@ module.exports = {
           return
         }
 
+        if (node.parent?.parent?.openingElement?.name?.name === 'picture') {
+          return
+        }
+
         context.report({
           node,
           message: `Do not use \`<img>\` element. Use \`<Image />\` from \`next/image\` instead. See: ${url}`,

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 (
+            <picture>
+              <img
+                src="/test.png"
+                alt="Test picture"
+                width={500}
+                height={500}
+              />
+            </picture>
+          );
+        }
+      }`,
+    `export class MyComponent {
+        render() {
+          return (
+            <div>
+              <picture>
+                <source media="(min-width:650px)" srcset="/test.jpg"/>
+                <img
+                  src="/test.png"
+                  alt="Test picture"
+                  style="width:auto;"
+                />
+              </picture>
+            </div>
+          );
+        }
+      }`,
   ],
   invalid: [
     {
@@ -51,7 +81,31 @@ ruleTester.run('no-img-element', rule, {
       errors: [
         {
           message:
-            'Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element',
+            'Do not use `<img>` element. Use `<Image />` from `next/image` instead. ' +
+            'See: https://nextjs.org/docs/messages/no-img-element',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: `
+      export class MyComponent {
+        render() {
+          return (
+            <img 
+              src="/test.png"
+              alt="Test picture"
+              width={500}
+              height={500}
+            />
+          );
+        }
+      }`,
+      errors: [
+        {
+          message:
+            'Do not use `<img>` element. Use `<Image />` from `next/image` instead. ' +
+            'See: https://nextjs.org/docs/messages/no-img-element',
           type: 'JSXOpeningElement',
         },
       ],