webアプリ firebase上の写真の読み取り書き込みが、ios環境でできない。
解決したいこと
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