今回はFirebaseのCloud Storageにアップしてある画像のURLを取得してページに表示する方法を解説します。
Cloud Storageから画像のURLを取得する方法
以下のように書けばokです。Vue3で書いていますが、Vue2やReactでも同じように書けるはずです。
<script setup>
import { getStorage, ref as storageRef, getDownloadURL } from 'firebase/storage';
const src = ref('');
const setFileUrl = () => {
const storage = getStorage();
getDownloadURL(storageRef(storage, 'パス')).then((url) => {
console.log(url); // Cloud Storageにアップされている画像のURL
src.value = url;
});
};
// マウント時に発火
onMounted(() => {
setFileUrl();
});
</script>
<template>
<div>
<img :src="src">
</div>
</template>getDownloadURL()という関数でCloud Storage内の指定したパスにある画像を取得できます。そのまま.then(url)とつなげることができ、この引数のurlが画像のURLになります。
あとはこれを<img>のsrcにセットすればCloud Storageの画像を表示できます！
必要があれば.then()の中でその後の処理を続けて書くこともできますね。
Vue3の場合、Vue3のrefとfirebase/storageからimportしたrefの名前が被っているのでそのまま使うとエラーになります。
なのでref as storageRefとimportしていますが、Vue2やReactの人はrefという名前のままimportして大丈夫です。
また、URLの取得とは逆にCloud Storageに画像をアップロードする方法を解説した記事もあるのでよければこちらも参考にしてみてください。
＞＞Cloud Storageに画像をアップロードする処理の書き方を解説
Cloud Storageから画像を取得できない場合
エラーが出て画像が取得できない場合はCloud Storageへのアクセス権がなくて弾かれているのが原因です。
FirebaseのコンソールからCloud Storageのセキュリティルールを変更する必要があります。こちらは本記事と趣旨がずれるのでやり方は各自でググってくださいm(__)m
まとめ
Cloud Storageのセキュリティ周りはやや面倒ですが、アップロードした画像のURLの取得自体は難しくないです。
Firebaseを使っているなら使う機会が多いと思うので知っておくと役に立つはずです。
