gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use next/image for hero/sidebar/markdown images

Browse Source
This commit is contained in:
gbanyan
2025-11-19 02:07:35 +08:00
parent ce43491e2e
commit f32206d390
3 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/blog/[slug]/page.tsx
View File

@@ -1,4 +1,5 @@
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { allPosts } from 'contentlayer/generated'; import { allPosts } from 'contentlayer/generated';
@@ -85,15 +86,15 @@ export default function BlogPostPage({ params }: Props) {
<SectionDivider> <SectionDivider>
<ScrollReveal> <ScrollReveal>
<article className="prose prose-lg prose-slate max-w-none dark:prose-dark"> <article className="prose prose-lg prose-slate max-w-none dark:prose-dark">
{post.feature_image && ( {post.feature_image && (
// feature_image is stored as "../assets/xyz", serve from "/assets/xyz" <Image
// eslint-disable-next-line @next/next/no-img-element src={post.feature_image.replace('../assets', '/assets')}
<img alt={post.title}
src={post.feature_image.replace('../assets', '/assets')} width={1200}
alt={post.title} height={600}
className="my-4 rounded" className="my-4 rounded"
/> />
)} )}
<div dangerouslySetInnerHTML={{ __html: post.body.html }} /> <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
</article> </article>
</ScrollReveal> </ScrollReveal>

19
app/pages/[slug]/page.tsx
View File

@@ -1,4 +1,5 @@
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { allPages } from 'contentlayer/generated'; import { allPages } from 'contentlayer/generated';
@@ -70,15 +71,15 @@ export default function StaticPage({ params }: Props) {
)} )}
</header> </header>
<article className="prose prose-lg prose-slate max-w-none dark:prose-dark"> <article className="prose prose-lg prose-slate max-w-none dark:prose-dark">
{page.feature_image && ( {page.feature_image && (
// feature_image is stored as "../assets/xyz", serve from "/assets/xyz" <Image
// eslint-disable-next-line @next/next/no-img-element src={page.feature_image.replace('../assets', '/assets')}
<img alt={page.title}
src={page.feature_image.replace('../assets', '/assets')} width={1200}
alt={page.title} height={600}
className="my-4 rounded" className="my-4 rounded"
/> />
)} )}
<div dangerouslySetInnerHTML={{ __html: page.body.html }} /> <div dangerouslySetInnerHTML={{ __html: page.body.html }} />
</article> </article>
</div> </div>

7
components/right-sidebar.tsx
View File

@@ -1,4 +1,5 @@
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub, faMastodon, faLinkedin } from '@fortawesome/free-brands-svg-icons'; import { faGithub, faMastodon, faLinkedin } from '@fortawesome/free-brands-svg-icons';
import { faFire, faArrowRight } from '@fortawesome/free-solid-svg-icons'; import { faFire, faArrowRight } from '@fortawesome/free-solid-svg-icons';
@@ -50,10 +51,12 @@ export function RightSidebar() {
className="mb-2 inline-block transition-transform duration-300 ease-out group-hover:-translate-y-0.5" className="mb-2 inline-block transition-transform duration-300 ease-out group-hover:-translate-y-0.5"
> >
{avatarSrc ? ( {avatarSrc ? (
// eslint-disable-next-line @next/next/no-img-element <Image
<img
src={avatarSrc} src={avatarSrc}
alt={siteConfig.name} alt={siteConfig.name}
width={96}
height={96}
unoptimized
className="h-24 w-24 rounded-full border border-slate-200 object-cover shadow-sm transition-transform duration-300 ease-out group-hover:scale-105 dark:border-slate-700" className="h-24 w-24 rounded-full border border-slate-200 object-cover shadow-sm transition-transform duration-300 ease-out group-hover:scale-105 dark:border-slate-700"
/> />
) : ( ) : (