前回は、Authentication で、パスワードの再設定ができるようにしました。

今回は、Firebase の Storage で保存した画像を画像をブラウザに表示します。

まずは、Firebase のサイドバーにある Storage をクリックします。

image2

『ファイルをアップロード』をクリックし、画像をアップロードします。

image3

画像をアップロードしました。

次は、Web アプリケーションで、Storage の画像を表示させます。

以前作成した、FirebaseConfig.js で Storage を設定しましょう。

Firebase から Storage を取得するために、getStorageを使用します。

firebase/storageからgetStorageをインポートしましょう。

import { getStorage } from "firebase/storage"

getStorageからstorageを作成します。

const firestorage = getStorage(firebase)

firestorage をエクスポートします。

export const firebaseApp = {
  firestore,
  fireauth,
  firestorage,
}

次に、画像を表示するコンポーネントを作成します。

firebaseAppfirestorageを使用します。

const firestorage = firebaseApp.firestorage

どの画像を参照するかを指定するために、ref を使います。

firebase/storageからrefをインポートしましょう。

import { ref } from "firebase/storage"

gsReference を作成し、第一引数に先程の storage、第二引数に Firebase の Storage に保存した画像の場所を指定します。

画像の場所は、Storage で保存した画像の上にある gs から始まる文字列+/ファイル名です。

この文字列をコピーし、第二引数に貼り付けます。

image4

const gsReference = ref(
  firestorage,
  "gs://test-books-94742.appspot.com/azuki.png"
)

次に、画像の URL を取得するには、getDownloadURLを使用します。

参照に、先程のgsReferenceを指定します。

また、レスポンスにurlが返ってくるので、useStateで状態管理します。

getDownloadURL(gsReference)
  .then(url => {
    setImage(url)
  })
  .catch(err => console.log(err))

ここで、url を console.log で確認すると、

image5

403 のエラーが発生しています。

これは、画像の読み込みが許可されていないのでエラーが発生します。

Firebase で認証設定しましょう。

FIrebase の Storage に戻ります。

Storage タグの Rules をクリックします。

image6

今のところ、read, write が false になっています。

image7

Firestorage Database と同様に、認証されている場合、許可するようにします。

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

『公開』をクリックします。

image8

先程のプロジェクトに戻ると、

image9

URL が取得できていました。

こちらの URL を、img タグに入れます。

<img src={image} alt="" />

image10

画像を表示することができました。

次回は、ブラウザで送信した画像を、Firebase の Storage に保存します。

ブログ一覧