LoginSignup
9

More than 3 years have passed since last update.

認可付きAPIから画像を取得してVueで表示する

Last updated at Posted at 2019-10-18

やりたいこと

axiosで、認証付き画像を取得し、<img>で表示する

問題

認証付きAPIが画像を返してくれるが、バイナリデータがそのまま来るためsrcで指定できない。困る。

解決

その1 base64で文字列にして読み込む

  • responseType: "arraybuffer"を指定する
ImageFromApi.vue

<template>
  <img :src="dataUrl" />
</template>

<script>
import axios from "axios";

export default {
  name: "ImageFromApi",
  props: {
    apiUrl: {
      type: String,
      required: true
    }
  },
  data: function() {
    return {
      dataUrl: ""
    };
  },
  mounted() {
    axios
      .get(this.apiUrl, {
        responseType: "arraybuffer",
        headers: {
          Authorization:
            "Bearer " + <Tokenを入れる>
        }
      })
      .then(response => {
        const prefix = `data:${response.headers["content-type"]};base64,`;
        const base64 = new Buffer(response.data, "binary").toString("base64");
        this.dataUrl = prefix + base64;
      });
  }
};
</script>

その2 blobObjectURLを生成して読み込む

  • responseType: "blob"を指定する
ImageFromApi.vue
<template>
  <img :src="blobUrl" />
</template>

<script>
import axios from "axios";

export default {
  name: "ImageFromApi",
  props: {
    apiUrl: {
      type: String,
      required: true
    }
  },
  data: function() {
    return {
      blobUrl: ""
    };
  },
  mounted() {
    axios
      .get(this.apiUrl, {
        responseType: "blob",
        headers: {
          Authorization:
            "Bearer " + <Tokenを入れる>
        }
      })
      .then(response => {
        this.blobUrl = window.URL.createObjectURL(response.data);
      });
  }
};
</script>

結論

画像を表示するたびにbase64が走り、重い画像がさらに重くなるので、
その2 `blob`で`ObjectURL`を生成して読み込むを採用とする。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9