Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Item.tsx #8

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update Item.tsx #8

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions next05/app/[searchTerm]/components/Item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Link from 'next/link'
import Image from "next/image"

type Props = {
result: Result
Expand All @@ -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}
Expand All @@ -42,4 +52,4 @@ export default function Item({ result }: Props) {
)

return content
}
}