[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:
parent
405b3ded77
commit
7015dc3635
3 changed files with 5 additions and 3 deletions
|
@ -399,7 +399,7 @@ function CrossFadeImage(incomingImageProps) {
|
||||||
opacity: 0;
|
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 />
|
<img {...prevImageProps} aria-hidden />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
@ -412,7 +412,7 @@ function CrossFadeImage(incomingImageProps) {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
`}
|
`}
|
||||||
>
|
>
|
||||||
{/* eslint-disable-next-line jsx-a11y/alt-text */}
|
{/* eslint-disable-next-line jsx-a11y/alt-text, @next/next/no-img-element */}
|
||||||
<img
|
<img
|
||||||
{...currentImageProps}
|
{...currentImageProps}
|
||||||
// If the current image _is_ the incoming image, we'll allow
|
// If the current image _is_ the incoming image, we'll allow
|
||||||
|
@ -434,7 +434,7 @@ function CrossFadeImage(incomingImageProps) {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
`}
|
`}
|
||||||
>
|
>
|
||||||
{/* eslint-disable-next-line jsx-a11y/alt-text */}
|
{/* eslint-disable-next-line jsx-a11y/alt-text, @next/next/no-img-element */}
|
||||||
<img
|
<img
|
||||||
{...incomingImageProps}
|
{...incomingImageProps}
|
||||||
aria-hidden
|
aria-hidden
|
||||||
|
|
|
@ -288,6 +288,7 @@ function AppearanceLayerSupportReviewStep({
|
||||||
marginTop="2"
|
marginTop="2"
|
||||||
>
|
>
|
||||||
{imageWithAlphaUrl && (
|
{imageWithAlphaUrl && (
|
||||||
|
// eslint-disable-next-line @next/next/no-img-element
|
||||||
<img
|
<img
|
||||||
src={imageWithAlphaUrl}
|
src={imageWithAlphaUrl}
|
||||||
width={600}
|
width={600}
|
||||||
|
|
|
@ -225,6 +225,7 @@ function ItemThumbnail({ item, tradeMatchingMode }) {
|
||||||
position: relative;
|
position: relative;
|
||||||
`}
|
`}
|
||||||
>
|
>
|
||||||
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||||
<img
|
<img
|
||||||
src={safeImageUrl(item.thumbnailUrl)}
|
src={safeImageUrl(item.thumbnailUrl)}
|
||||||
alt={`Thumbnail art for ${item.name}`}
|
alt={`Thumbnail art for ${item.name}`}
|
||||||
|
|
Loading…
Reference in a new issue