From 7015dc363517b6b37944b5ba81ea426e16ab2be6 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 2 Nov 2021 00:55:21 -0700
Subject: [PATCH] [WIP] Add lint exceptions for <img> tags
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

There are some places where we use <img> tags where I think it's actually just the right thing to do.

`next/image` is good for image optimization, but I don't think it's worth the proxying for Neopets art images that don't actually always have a higher-res version to begin with.

Idk, maybe the species faces could be a decent choice, but right now we're solving it with `srcSet`, and that's fine. Doesn't seem worth migrating, let's just move on with our lives! 😅

I'm still leaving the lint rule on though, because I think it's a helpful reminder. (I don't think it catches `<Box as="img" />` though, which is a shame, because that would be our natural default in this app!)
---
 src/app/ItemPage/SpeciesFacesPicker.js                      | 6 +++---
 .../support/AppearanceLayerSupportUploadModal.js            | 1 +
 src/app/components/SquareItemCard.js                        | 1 +
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/ItemPage/SpeciesFacesPicker.js b/src/app/ItemPage/SpeciesFacesPicker.js
index 4be27d9..7864fa6 100644
--- a/src/app/ItemPage/SpeciesFacesPicker.js
+++ b/src/app/ItemPage/SpeciesFacesPicker.js
@@ -399,7 +399,7 @@ function CrossFadeImage(incomingImageProps) {
                 opacity: 0;
               `}
             >
-              {/* eslint-disable-next-line jsx-a11y/alt-text */}
+              {/* eslint-disable-next-line jsx-a11y/alt-text, @next/next/no-img-element */}
               <img {...prevImageProps} aria-hidden />
             </div>
           )}
@@ -412,7 +412,7 @@ function CrossFadeImage(incomingImageProps) {
                 opacity: 1;
               `}
             >
-              {/* eslint-disable-next-line jsx-a11y/alt-text */}
+              {/* eslint-disable-next-line jsx-a11y/alt-text, @next/next/no-img-element */}
               <img
                 {...currentImageProps}
                 // If the current image _is_ the incoming image, we'll allow
@@ -434,7 +434,7 @@ function CrossFadeImage(incomingImageProps) {
                 opacity: 0;
               `}
             >
-              {/* eslint-disable-next-line jsx-a11y/alt-text */}
+              {/* eslint-disable-next-line jsx-a11y/alt-text, @next/next/no-img-element */}
               <img
                 {...incomingImageProps}
                 aria-hidden
diff --git a/src/app/WardrobePage/support/AppearanceLayerSupportUploadModal.js b/src/app/WardrobePage/support/AppearanceLayerSupportUploadModal.js
index 80e1f88..03cdd71 100644
--- a/src/app/WardrobePage/support/AppearanceLayerSupportUploadModal.js
+++ b/src/app/WardrobePage/support/AppearanceLayerSupportUploadModal.js
@@ -288,6 +288,7 @@ function AppearanceLayerSupportReviewStep({
         marginTop="2"
       >
         {imageWithAlphaUrl && (
+          // eslint-disable-next-line @next/next/no-img-element
           <img
             src={imageWithAlphaUrl}
             width={600}
diff --git a/src/app/components/SquareItemCard.js b/src/app/components/SquareItemCard.js
index af41c97..c7eb6a5 100644
--- a/src/app/components/SquareItemCard.js
+++ b/src/app/components/SquareItemCard.js
@@ -225,6 +225,7 @@ function ItemThumbnail({ item, tradeMatchingMode }) {
             position: relative;
           `}
         >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={safeImageUrl(item.thumbnailUrl)}
             alt={`Thumbnail art for ${item.name}`}