Don't report @next/next/no-img-element when inside a <Picture> element

[votemike]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Linting throws a warning of @next/next/no-img-element when an <img> tag is inside a <picture> tag.
<Image> cannot do all the things that <picture> can and so using the <img> is a legitimate use-case.
Therefore this warning should not be thrown.

Expected Behavior

Linting ignores <img> tags inside <picture> tags.

To Reproduce

Add an <img> tag inside a <picture> tag and run linting.

[balazsorban44]

Thanks, sounds like a change is needed in this ESLint rule:

https://github.com/vercel/next.js/blob/canary/packages/eslint-plugin-next/lib/rules/no-img-element.js

And adding a test use-case in this folder to verify it works correctly:

https://github.com/vercel/next.js/tree/canary/test/integration/eslint

[andreistefanwork]

Hi! Can I pick up this issue? Or @votemike were you planning to do it?

[votemike]

@andreistefanwork go for it!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.