const url = 'https://nextjs.org/docs/messages/no-img-element'

module.exports = {
  meta: {
    docs: {
      description: 'Prevent usage of `<img>` element to prevent layout shift.',
      category: 'HTML',
      recommended: true,
      url,
    },
    fixable: 'code',
  },

  create: function (context) {
    return {
      JSXOpeningElement(node) {
        if (node.name.name !== 'img') {
          return
        }

        if (node.attributes.length === 0) {
          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}`,
        })
      },
    }
  },
}

@@ -503,28 +503,55 @@
 if (
-node.parent?
+%0A          node.parent &&%0A          node
 .parent
-?
 .ope
@@ -565,15 +565,159 @@
 ment
-?.name?
+ &&%0A          node.parent.parent.openingElement &&%0A          node.parent.parent.openingElement.name &&%0A          node.parent.parent.openingElement.name
 .nam
@@ -731,16 +731,25 @@
 picture'
+%0A        
 ) %7B%0A    

don't use optional chaining in ESLint rule (#38534)