やりたいこと
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 blob
でObjectURL
を生成して読み込む
-
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`を生成して読み込む
を採用とする。