Avoid using next/image

pages/components/Footer/BlueRibbon.js

@@ -1,12 +1,11 @@
 // Next.js
 import Link from 'next/link'
-import Image from 'next/image'
 
 const happybusy = (props) => {
   return (
     <Link href="https://www.eff.org/pages/blue-ribbon-campaign">
       <a>
-        <Image
+        <img
           src="/images/brstrip.gif"
           width={150}
           height={41}

pages/components/Footer/HappyBusy.js

@@ -1,12 +1,11 @@
 // Next.js
 import Link from 'next/link'
-import Image from 'next/image'
 
 const HappyBusy = (props) => {
   return (
     <Link href="https://sites.google.com/site/happybusy/">
         <a>
-          <Image
+          <img
             src="/images/busy_banner.png"
             width={200}
             height={42}

pages/components/Minecraft.js

@@ -5,8 +5,6 @@ import React, { useState, useEffect } from 'react';
 import { useTranslation, useLanguageQuery } from 'next-export-i18n';
 
 import axios from 'axios';
-import Image from 'next/image'
-import { list } from 'postcss';
 
 export default function Minecraft(props) {
   const { t } = useTranslation();
@@ -55,7 +53,7 @@ export default function Minecraft(props) {
                 url.push('https://mc-heads.net/avatar/' + data.players.list[i])
               }
               for (var i in url){
-                list.push(<Image src={url[i]} key={i} className="inline" height="50" width="50" alt={i}/>)
+                list.push(<img src={url[i]} key={i} className="inline" height="50" width="50" alt={i}/>)
               }
               return <div>{list}</div>
             }

pages/components/Minecraft/Head.js

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import Image from 'next/image'
 
 function App (props) {
   const uuid = props;
 
   return (
-    <Image
+    <img
         src={"https://crafatar.com/renders/body/" + uuid.uuid}
         width={110}
         height={250}

pages/index.js

@@ -9,7 +9,6 @@ import BlueRibbon from "./components/Footer/BlueRibbon"
 import HappyBusy from "./components/Footer/HappyBusy"
 
 // Next.js
-import Image from 'next/image'
 import Link from 'next/link'
 
 // i18n
@@ -35,12 +34,11 @@ export default function Index(props) {
       <Layout title={t('home')}>
         <div className="my-9 text-center">
           <div className="m-10">
-          <Image
+          <img
               src         = "/images/avatar_riru.png"
               alt         = "yude's avatar"
               width       = {200}
               height      = {200}
-              unoptimized = {true}
           />
           </div>
           

pages/minecraft.js

@@ -9,7 +9,6 @@ import { useRouter } from 'next/router'
 import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
 
 // Next.js
-import Image from 'next/image'
 import Link from 'next/link'
 
 // Custom pages
@@ -51,7 +50,7 @@ export default function About(props) {
             <div>
                 <p className="my-2 text-3xl text-center">{t('title')}</p>
                 <div className="w-full">
-                <Image
+                <img
                     src         = "/images/dynmap.png"
                     alt         = "Minecraft brief world map generated by Dynmap"
                     width       = {1354}

pages/profile.js

@@ -11,8 +11,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 // Next.js, React
 import Link from 'next/link'
-import Image from 'next/image'
-import { useRouter } from 'next/router'
 
 // Discord
 import DiscordStatus from './components/Discord/DiscordStatus'
@@ -46,7 +44,7 @@ export default function Profile(props) {
           }
           <div>
             <div className="flex mb-10 justify-center">
-            <Image
+            <img
               className   = "rounded-full hover:animate-rumble z-0 p-15"
               src         = "/images/avatar_mel.png"
               alt         = "yude's avatar"