APIの画像を取得し、imgタグに表示したい

Question

Next.js でアプリケーションを作っているのですが、画像のソースをAPIから取得しimgタグに表示しようとしたところ、受け取ったデータが文字化けしてうまく表示できません。

export const getServerSideProps: GetServerSideProps = async () => {
  let res = await axios.get(
    'https://static-clst.avgle.com/videos/tmb16/530447/1.jpg',
  )
  let data = res.data;
  return {
    props: {data},
  }
}

//res.dataが　��r=�Es�ڦ}Ne�2,�v���|�L�H#p;��q�����u�'P~�?ڜ|�����k�rc のような文字化けが返ってくる

<試したこと>
・axiosのリクエストヘッダーに 'responseType': 'arraybuffer',をつけてリクエストをしてみた。
・フロント側でBlob,createObjectURLで画像のurlを生成してみたが真っ白な画像が生成された。
・chardet　や　iconv などを使いエンコードタイプを判別して試みたが、上と同様の結果だった。
・他のAPIの画像ソースに対しても行ったが、結果は変わらなかった。

よろしくお願いします。