【React】StackblitzでimgタグにUnsplashの画像が挿入できない

はじめに

StackBlitzというWeb上の統合開発環境を使ってReactの学習中、imgタグに挿入する画像をUnsplashという画像のフリー素材サイトから取得しようとしたときに発生した問題。

問題

imgタグに「Unsplash」という画像のフリー素材を提供しているサイトから、ワンちゃんの画像を挿入しようとしたが反映されなかった。

export const UserCard = () => {
  return (
    <div>
      <img
        src="https://source.unsplash.com/dogs-face-2l0CWTpcChI"
        alt="プロフィール"
      />
      <p>名前</p>
      <dl>
        <dt>メール</dt>
        <dd>[e-mail]</dd>
        <dt>TEL</dt>
        <dd>000-9999-88888</dd>
        <dt>会社名</dt>
        <dd>ああああああ会社</dd>
        <dt>WEB</dt>
        <dd>htttttttt.com</dd>
      </dl>
    </div>
  );
};

解決方法

URLを「Lorem Picsum」というランダムにフリー画像が表示されるサイトに変更すると画像が表示されるようになりました。

どうやら「Unsplash」だとアクセスする時にブロックされるようです。

export const UserCard = () => {
  return (
    <div>
      <img
        src="https://fastly.picsum.photos/id/563/200/200.jpg?hmac=AUY3PTIdje13MIMulUogg4h4AYMKO4XfeEZQaEGw8fQ"
        alt="プロフィール"
      />
      <p>名前</p>
      <dl>
        <dt>メール</dt>
        <dd>[e-mail]</dd>
        <dt>TEL</dt>
        <dd>000-9999-88888</dd>
        <dt>会社名</dt>
        <dd>ああああああ会社</dd>
        <dt>WEB</dt>
        <dd>htttttttt.com</dd>
      </dl>
    </div>
  );
};

おわりに

ワンちゃんの画像にしたかった。。