Go to Qiita Advent Calendar 2024 Top
LoginSignup
nosho96ohi
@nosho96ohi

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

webアプリ　firebase上の写真の読み取り書き込みが、ios環境でできない。

Q&A

Closed

JavaScriptiOSSafariWebアプリケーションVue.js

解決したいこと

Vueを使用したwebアプリ。ユーザーのアイコンをfirebaseに保存しているが、Windows環境では正常に読み取り、表示できるが、ios環境で行うと表示できない。

発生している問題・エラー

chrome Developer toolを使用し、検証を行ったところ、コンソールには特に何も表示されない。
firebase　Databaseのstatusの中のドキュメントのurlフィールドにStorageにある画像へのリンクが保存されている。
他にも写真を取得し表示する機能があるが、正常に動作する。
正常に動作するところは、firebaseのdoc（複数）を配列にpushしていて、配列の中のオブジェクトの要素にurlがある。
問題のところは、firebaseのdocをオブジェクトにいれている。

   <img
          id="icon"
          :src="status.url"
          v-if="imageLoaded"
          @error="onImageError"
          alt=""
        />

export default {
  data: function () {
    return {
      status: {},
    }
  },
  mounted() {
    const auth = getAuth()
    const user = auth.currentUser
    const db = getFirestore()
    if (user) {
      const userUid = user.uid

      // Firestoreクエリを作成してデータを取得
      const Q = query(collection(db, "status"), where("uid", "==", userUid))
      getDocs(Q)
        .then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            // ドキュメントのデータを取得し、Vueデータに追加
            this.status = doc.data()
            console.log(this.status)
          })
        })
        .catch((error) => {
          console.error("データの取得エラー:", error)
        })
    } else {
      alert("ログインしてください。")
      this.$router.push("/login")
    }
  },
0

2Answer

asarashi
@asarashi

正常に動作するところは、firebaseのdoc（複数）を配列にpushしていて、配列の中のオブジェクトの要素にurlがある。
問題のところは、firebaseのdocをオブジェクトにいれている。

正常に動作するコードと、問題のコードを比較して載せたうえで、WindowsではLogが出て、iosではLogが出ない等記事に追加して書くと回答が来やすいかもしれないです。
user.uidが取れるかどうかのタイミングが環境によって違うのでwhere条件に引っかからずdoc.data()が取れないとかかなぁと思いました。お力になれたら幸いです。

          querySnapshot.forEach((doc) => {
            // ここでドキュメントが存在するかチェック
            if(doc.exist){
              this.status = doc.data()
              console.log(this.status) // windows ,iOSの結果
            } else {
              console.log("No document.") // // windows ,iOSの結果
            }
          })
0Like

Your answer might help someone💌

LoginSign Up