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

andreistefanwork · Jun 9, 2022 · ac706a0 · ac706a0
1 parent 0bfdf0e
commit ac706a0
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 3 deletions.
diff --git a/errors/no-img-element.md b/errors/no-img-element.md
@@ -2,7 +2,7 @@
 
 ### Why This Error Occurred
 
-An HTML `<img>` element was used to display an image. For better performance and automatic Image Optimization, use Next.js' built-in image component instead.
+An HTML `<img>` element was used to display an image. Use either `<picture>` in conjunction with `<img>` element, or use Next.js' built-in image component that has better performance and automatic Image Optimization over `<img>`.
 
 ### Possible Ways to Fix It
 
@@ -27,6 +27,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)
diff --git 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 <img>. Use Image from 'next/image' instead. See: https://nextjs.org/docs/messages/no-img-element`,
+          message:
+            "Do not use <img>. Use either Image from 'next/image' or <picture> in conjunction with <img>. " +
+            '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
@@ -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>. Use Image from 'next/image' instead. See: https://nextjs.org/docs/messages/no-img-element",
+            "Do not use <img>. Use either Image from 'next/image' or <picture> in conjunction with <img>. " +
+            '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>. Use either Image from 'next/image' or <picture> in conjunction with <img>. " +
+            'See: https://nextjs.org/docs/messages/no-img-element',
           type: 'JSXOpeningElement',
         },
       ],