【Vue x Storage】Firebase storageにて取得した画像を表示させたいです。

Question

#Firebase storageにて取得した画像を表示させたいです。

Vue x Firebaseにてポートフォリオを作成しており、storageを使用して取得した画像を
表示させたいのですが、現状画像選択時には下記のように

「プロフィール画像を更新する」ボタンを押すと選択した画像が表示されて、
storageにも画像が指定したパスで格納されていることは確認できているのですが、
更新というボタンを押下した後、マイページで画像が切り替わらないです・・
（画像にあるプロフィール編集画面では画像選択後、選択した画像に切り替わります）

コードは下記に掲載しております。

何が原因で表示されないのか分からず行き詰まってしまっております・・

分かる方いらっしゃいましたらお力添えをいただきたいです。
よろしくお願いいたします。

<img :src="preview" width="200" height="200" class="profile-img" alt="プロフィール画像" />
  <label class="profile-txt profile-update">プロフィール画像を編集する
   <input type="file" @change="onFileChange" style="display:none" />
  </label>

export default {
  data() {
    return {
      file: "",
      profileImage: "",
      preview: require("../assets/デフォルトの画像.jpg")
    };
  },
  methods: {
    
    },
    onFileChange(e) {
      const image = e.target.files; //選択された画像ファイルを選択
      this.file = image[0]; //画像ファイルを1つだけ選択

      // Firebase storageに保存するパス乱数で決めてthis.uploadUrlへ代入
      const S =
        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
      const N = 16;
      this.uploadUrl = Array.from(crypto.getRandomValues(new Uint32Array(N)))
        .map(n => S[n % S.length])
        .join("");

      let self = this;
      let fileReader = new FileReader();
      //FileReaderは、Fileオブジェクトからデータを読み込むことのみを目的としたオブジェクト
      fileReader.onload = function() {
        //fileReader.onloadは、読み込みが正常に完了した時に発火するイベント
        self.preview = fileReader.result;
        //fileReaderの結果をself.previewへ代入
        //関数の中ではfileReaderの[this]を参照してしまうため、一旦[self]に代入して、[this.]の代わりに[self.] とする
      };
      fileReader.readAsDataURL(this.file);
      //this.fileの値をデータURLとして読み込み、434行目が発火する。
    },
    uploadImage() {
      //画像をfirebase storageに保存
      firebase
        .storage()
        .ref(this.uploadUrl) //さっき決めたパスを参照して、
        .put(this.file) //保存する
        .then(() => {
          //保存が成功したら、保存した画像ファイルの場所とともにfirestoreに保存する準備
          const profileImage = {
            uploadUrl: this.uploadUrl,
            time: firebase.firestore.FieldValue.serverTimestamp()
          };
          // ここでfirebase databaseに保存する
          firebase
            .firestore()
            .collection("users") //保存する場所を参照して、
            .doc(this.$route.params.uid) //追加で保存
            .add({
              profileImage: profileImage
            });
        });
    }
  },

Comments

[1T2R3M4]

https://qiita.com/TMTN/questions/ba6c08790a0459e674ac

以下ご対応ください。
https://teratail.com/help#posted-otherservice

[TMTN]

1T2R3M4様
ご指摘ありがとうございます。
対応済です。大変申し訳ございませんでした。

Answer 1

内容を大きく変更しましたが、下記に変更して解決いたしました。

 uploadImage() {
      const uploadTask = firebase
        .storage()
        .ref(this.uploadUrl) 
        .put(this.file) 

      uploadTask
        .then(() => {
          uploadTask.snapshot.ref.getDownloadURL().then((fileUrl)=>{
       const uploadedImage = {
           fileUrl: fileUrl,
           time: firebase.firestore.FieldValue.serverTimestamp(),
          };
          firebase
            .firestore()
            .collection("users") 
            .doc(this.$route.params.uid) 
            .set(
              {
                name: this.name,
                sex: this.sex,
                age: this.age,
                access: this.access,
                selfpr: this.selfpr,
                profession: this.profession,
                genre: this.genre,
                favMovie: this.favMovie,
                uploadedImage: uploadedImage,
                time: firebase.firestore.FieldValue.serverTimestamp(),
              },
              { merge: true }
            );
          })
        });
    },