如何在Next.js中为帖子图片添加条件渲染？

你可以通过条件渲染实现需求：当post.image_url存在且有效时显示Image组件，否则展示“image unavailable”文本。以下是修改后的代码：

import Link from "next/link";
import Image from "next/image";
import { revalidatePath } from "next/cache";

export default async function Page({ params }) {
 
 console.log(params.posts);
  
const posts = (await sql`SELECT * FROM posts01`).rows;

  return (
    <div className="p-4">
      <h1 className="text-3xl font-bold mb-4"> Posts</h1>
      {/* 修正key的位置：需放在map返回的每个子组件根节点上 */}
      {posts.map((post) => (
        <div key={post.post_id}>
          <Link
            href={`/allPosts/${post.post_id}`}
            className="text-xl font-bold hover:underline mb-2"
          >
            <h3 className="text-xl font-bold hover:underline mb-2">
              {post.title}
            </h3>
            <h5 className="text-lg">{post.content}</h5>
          </Link>
          {/* 条件判断：根据image_url是否存在切换显示内容 */}
          {post.image_url ? (
            <Image src={post.image_url} alt={post.title} width={300} height={300} />
          ) : (
            <h4 className="text-gray-500 mt-2">image unavailable</h4>
          )}
        </div>
      ))}
    </div>
  );
}   

关键修改说明 #

• 修正key的位置：原代码在posts.map外层div设置key属于错误用法，应将key绑定到map返回的每个子组件根节点上，使用post.post_id作为唯一标识更合理。
• 添加条件渲染逻辑：通过三元运算符判断post.image_url是否存在，存在则渲染图片组件，否则显示占位文本。
• 优化alt属性：将alt值设为post.title，提升页面的可访问性。

内容的提问来源于stack exchange，提问作者Robbie