Reactでランダムに画像を表示させる

今回作ったもの

こちらの記事を参考にして、Reactでランダムに画像を表示させるwebアプリを作りました。
見た目はこんな感じです。new imageというボタンを押すとランダムに選ばれた画像が表示されます。

実装について

今回はAxiosを用いて画像の取得を行なった。コードは以下の通りです。

App.js

function App() {
  const [image, setImage] = useState();
  useEffect(() => {axios.get("https://source.unsplash.com/random", {responseType: 'blob',}).then(response => {
    setImage([URL.createObjectURL(response.data)]);
  })}, [])
  return (
    <div className="App">
      <img src={image} width="700px" />
      <button onClick={() => {
        axios.get("https://source.unsplash.com/random", {responseType: 'blob',})
        .then(response => {
          setImage([URL.createObjectURL(response.data)]);
        })}} className='button'>new image</button>
    </div>
  );
}

export default App;

一つ躓いたのは、getしてきた画像がうまく表示されなかったことです。
https://stackoverflow.com/questions/42785229/axios-serving-png-image-is-giving-broken-image

この記事を参考に修正して正常に動くようになりました。