😇

Next14で画像を表示する

2024/05/26に公開

Next.js

Tailwind CSS

tech

Tips💡

appディレクトリに変わってからなのか画像の表示のやり方が変わった？？？
メモしておかないと忘れていたので記事を書きます(^_^;)

やり方
- publicフォルダに画像を配置する
- import Image from "next/image"; を使う

[ここに画像を配置する]

page.tsxを修正する

app/page.tsx

import Image from "next/image";

export default function Home() {
  return (
    <div>
      <img className="w-36 h-36 rounded-full" src="/orechan.jpeg" alt="Rounded avatar"></img>
      <h1 className="text-blue-600 text-4xl"> 俺ちゃん</h1>
    </div>
  );
}

[成功していればこのように表示される　]

最後に

フロントエンドは進化するのが早い。どこでやり方覚えたか覚えていません。公式には書いてないような？

Tips💡

最後に

Discussion