fix: <img> usage; use NextImage, add domains to allow list

Author: wackerow

next.config.js

@@ -81,6 +81,14 @@ module.exports = (phase, { defaultConfig }) => {
           protocol: "https",
           hostname: "crowdin-static.downloads.crowdin.com",
         },
+        {
+          protocol: "https",
+          hostname: "avatars.githubusercontent.com",
+        },
+        {
+          protocol: "https",
+          hostname: "coin-images.coingecko.com",
+        },
       ],
     },
     async headers() {

src/components/Contributors.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react"
 import shuffle from "lodash/shuffle"
 
+import { Image } from "@/components/Image"
 import { Flex } from "@/components/ui/flex"
 import InlineLink from "@/components/ui/Link"
 import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
@@ -39,7 +40,7 @@ const Contributors = () => {
             className="m-2 max-w-[132px] transform shadow transition-transform duration-100 hover:scale-[1.02] hover:rounded hover:bg-background-highlight focus:scale-[1.02] focus:rounded"
             key={contributor.login}
           >
-            <img
+            <Image
               className="h-[132px] w-[132px]"
               src={contributor.avatar_url}
               alt={contributor.name}

src/components/EventCard.tsx

@@ -45,6 +45,7 @@ const EventCard: React.FC<EventCardProps> = ({
       </CardHeader>
       <div className="flex items-center justify-center">
         {imageUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
           <img
             src={imageUrl}
             alt={title}

src/components/StablecoinsTable.tsx

@@ -1,3 +1,5 @@
+import { cn } from "@/lib/utils/cn"
+
 import { ButtonLink } from "./ui/buttons/Button"
 import { Flex } from "./ui/flex"
 import {
@@ -8,6 +10,7 @@ import {
   TableHeader,
   TableRow,
 } from "./ui/table"
+import { Image } from "./Image"
 
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 import { useTranslation } from "@/hooks/useTranslation"
@@ -31,7 +34,7 @@ const StablecoinsTable = ({
   content,
   hasError,
 }: StablecoinsTableProps) => {
-  const { flipForRtl } = useRtlFlip()
+  const { twFlipForRtl } = useRtlFlip()
   const { t } = useTranslation("page-stablecoins")
 
   const stablecoinsType = {
@@ -51,9 +54,7 @@ const StablecoinsTable = ({
 
           {content && content[0]?.url && (
             <TableHead className="text-right font-normal">
-              <span className="inline-block" style={{ transform: flipForRtl }}>
-                ↗
-              </span>
+              <span className={cn("inline-block", twFlipForRtl)}>↗</span>
             </TableHead>
           )}
         </TableRow>
@@ -71,7 +72,7 @@ const StablecoinsTable = ({
           <TableRow key={idx}>
             <TableCell>
               <Flex>
-                {image && <img src={image} alt="" className="me-4 h-6 w-6" />}
+                {image && <Image src={image} alt="" className="me-4 h-6 w-6" />}
                 <>{name}</>
               </Flex>
             </TableCell>