[WIP] Add lint exceptions for <img> tags

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!)
This commit is contained in:
Emi Matchu 2021-11-02 00:55:21 -07:00
parent 405b3ded77
commit 7015dc3635
3 changed files with 5 additions and 3 deletions

View file

@ -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

View file

@ -288,6 +288,7 @@ function AppearanceLayerSupportReviewStep({
marginTop="2"
>
{imageWithAlphaUrl && (
// eslint-disable-next-line @next/next/no-img-element
<img
src={imageWithAlphaUrl}
width={600}

View file

@ -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}`}