ChatGPTを使用したアプリ開発記【プロフィール画面の画像表示処理の修正】

🧨 問題点：

Profile.js

{post.imageUrl && (
  <video controls style={{ maxWidth: '100%' }}>
    <source src={post.videoUrl} type="video/mp4" />
  </video>
)}

• post.imageUrl をチェックしているのに、表示しようとしているのは post.videoUrl（＝ null）です。
• 結果：写真が表示されない。

🔧 修正後コード

Profile.js

{post.imageUrl && (
  <img
    src={post.imageUrl}
    alt="投稿画像"
    style={{ maxWidth: '100%', borderRadius: '8px', marginTop: '0.5rem' }}
  />
)}

{post.videoUrl && (
  <video controls style={{ maxWidth: '100%', borderRadius: '8px', marginTop: '0.5rem' }}>
    <source src={post.videoUrl} type="video/mp4" />
  </video>
)}

• 投稿に画像がある場合、それが img タグで表示される。
• 投稿に動画がある場合、それが video タグで再生される。

UI