<img>
tag JS-W1015<img>
element. Use <Image />
from next/image
instead. See: https://nextjs.org/docs/messages/no-img-element44 <span className="absolute -top-2.5 text-center w-full "><a className="dark:bg-zinc-700 px-2 py-1 rounded-lg">OR</a></span>
45 </div>
46 <div className="transition ease-in-out dark:bg-zinc-100 dark:hover:bg-zinc-400 mx-2 text-black py-1.5 rounded-lg text-xl flex grid-cols-2 gap-4 my-4 justify-center cursor-pointer" onClick={ ()=>setGoogleSignin(!googleSignin)}>
47 <img src="/images/GoogleLogo.webp" className="w-7"/>48 <p>Sign in with Google</p>
49 </div>
50 <p className="m-auto my-2 lg:m-2">Don't have an account? Sign up <a class="transition ease-in-out underline hover:text-sky-300" href="/sign-up">here</a></p>
<img>
element. Use <Image />
from next/image
instead. See: https://nextjs.org/docs/messages/no-img-element19 </Head>
20 <NavBar forceRerender={props.forceRerender}/>
21 <header className={`h-fit w-full overflow-hidden dark:bg-zinc-700 dark:text-neutral-200 ${styles.pagewdbg}`}>
22 <img className="max-h-72 mx-auto mt-16 mb-10 w-auto h-auto aspect-auto" src="/images/CavernsLogo.webp"/>23 </header>
24 <main className="flex-grow w-full mx-auto mb-0 dark:bg-zinc-700 dark:text-neutral-200">
25 <p className="text-center text-3xl pt-2 pb-2 mx-auto max-w-9/12">A top down indie action-adventure RPG.</p>
<img>
element. Use <Image />
from next/image
instead. See: https://nextjs.org/docs/messages/no-img-element61 <Link href={`/game-info/enemy-stats/${jdata.enemies[i].toLowerCase()}`} className="">
62 <div className="transition ease-in-out rounded-lg border-4 border-zinc-600 bg-zinc-300 dark:border-zinc-500 dark:bg-zinc-800 dark:hover:bg-zinc-700 hover:scale-105 hover:bg-zinc-400 p-2 grid grid-cols-3 gap-5 cursor-pointer">
63 <a className="text-4xl col-span-2 my-auto ml-6">{capitalizeFirstLetter(jdata.enemies[i])}</a>
64 <img src={`/api/game-info/images/enemies/${jdata.enemies[i].toLowerCase()}`} className="" />65 </div>
66 </Link>
67 ))
<img>
element. Use <Image />
from next/image
instead. See: https://nextjs.org/docs/messages/no-img-element24 <img src="/images/snap3.png" className="w-auto h-auto max-h-m max-w-md m-auto" />
25 </div>
26 <div>
27 <img src="/images/snap2.png" className="w-auto h-auto max-h-m max-w-md m-auto" />28 </div>
29 </div>
30 </main>
<img>
element. Use <Image />
from next/image
instead. See: https://nextjs.org/docs/messages/no-img-element21 <img src="/images/snap1.png" className="w-auto h-auto max-h-m max-w-md m-auto" />
22 </div>
23 <div>
24 <img src="/images/snap3.png" className="w-auto h-auto max-h-m max-w-md m-auto" />25 </div>
26 <div>
27 <img src="/images/snap2.png" className="w-auto h-auto max-h-m max-w-md m-auto" />
It is recommended not to use an <img>
tag; instead, use the built-in Image
component. Image
component is an extension of img
element, and it offers the following advantages:
WebP
(30% smaller than JPEG
)function Home() {
return (
<>
<img
src="https://example.com/test"
alt="Landscape picture"
width={500}
height={500}
/>
</>
)
}
export default Home
import Image from 'next/image'
function Home() {
return (
<>
<Image
src="https://example.com/test"
alt="Landscape picture"
width={500}
height={500}
/>
</>
)
}
export default Home