From 80f6440570dbcf5c11c6a747a9837b4de463620f Mon Sep 17 00:00:00 2001
From: IMSRS <53367382+theunhackable@users.noreply.github.com>
Date: Mon, 14 Aug 2023 20:57:43 +0530
Subject: [PATCH] Update Item.tsx

replaced img tag with Image tag
---
 next05/app/[searchTerm]/components/Item.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/next05/app/[searchTerm]/components/Item.tsx b/next05/app/[searchTerm]/components/Item.tsx
index 956ece14..6d38ae9d 100644
--- a/next05/app/[searchTerm]/components/Item.tsx
+++ b/next05/app/[searchTerm]/components/Item.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import Image from "next/image"
 
 type Props = {
     result: Result
@@ -22,7 +23,16 @@ export default function Item({ result }: Props) {
             <article className="m-4 max-w-lg">
                 <div className="flex flex-row gap-4">
                     <div className="flex flex-col justify-center">
-                        <img
+                        {/* Image tag is recommended, hence replaced img tag with Image tag from next.js.  */}
+                        {/* One thing to note here is Image tad do not allow Image source url from every external source. Image source url should be included in next.config.js
+                         like this:
+                         const nextConfig = {
+                               images: {
+                                domains: ['upload.wikimedia.org']
+                               }
+                            }
+                        */}
+                        <Image
                             src={result.thumbnail.source}
                             alt={result.title}
                             width={result.thumbnail.width}
@@ -42,4 +52,4 @@ export default function Item({ result }: Props) {
         )
 
     return content
-}
\ No newline at end of file
+}