propsで受け取った画像情報が表示できない

初めに

今回ReactをUdemyで学習していて、propsのオブジェクト受け取って、画像を表示することを実装しました。
ですが凡ミスによって画像表示ができなかったので、今後気をつけるためにも記事に残します！

##失敗コード

<img
  height={160}
  width={160}
  src="{user.image}"
  alt="{user.name}"
/>

<dl>
  <dt>mail</dt>
  <dd>{user.email}</dd>
  <dt>TEL</dt>
  <dd>{user.phone}</dd>
  <dt>会社名</dt>
  <dd>{user.company.name}</dd>
  <dt>WEBサイト</dt>
  <dd>{user.website}</dd>
</dl>

このコードではmail、TEL、会社名、WEBサイトはpropsからデータを受け取って表示できますが、画像情報が表示されません。

解決策

<img
  height={160}
  width={160}
  src={user.image}
  alt={user.name}
/>
<p>名前</p>
<SDl>
  <dt>mail</dt>
  <dd>{user.email}</dd>
  <dt>TEL</dt>
  <dd>{user.phone}</dd>
  <dt>会社名</dt>
  <dd>{user.company.name}</dd>
  <dt>WEBサイト</dt>
  <dd>{user.website}</dd>
</SDl>

僕はいつもweb制作を主に行っているのですが、その癖でタグのsrc属性、alt属性をsrc="{user.image}" alt="{user.name}"と書いていました。
この場合はjsの式を記述するので文字列を記載する""(ダブルクォーテーション)が余分でした。

終わりに

凡ミスって意外と気づくことが少ないので、今後はchstGPT等にチェックしてもらうのも一つの手だなと考えています！