ios環境で、保存済みの画像をfirebaseからimgタグに表示することができない
解決したいこと
vueとfirebaseを使用し、webアプリを開発中です。
このwebアプリの中で、getDocsでユーザーのstatusドキュメントを取得し、アイコン画像を表示する機能があります。
これはWindows環境では正常に動作するのですが、firebase deploy後、ios環境で使用すると表示されません。
chrome developer toolで検証しましたが、コンソールにエラーは表示されませんでした。ドキュメントの取得自体はできていることが確認できています。
また、status以外にユーザーがfirebaseに保存した画像を読み取り表示する機能がありますが、そちらはios環境でも正常に動作します。
urlは実際に画像が保存されているfirebase strageへのurlになっています。
どこが原因か心当たりのある方はいらっしゃいませんか。
問題のコード↓
<template>
<img
id="icon"
:src="status.url"
v-if="imageLoaded"
@error="onImageError"
alt=""
/>
<template>
<script>
import { getAuth } from "firebase/auth"
import {
getFirestore,
where,
query,
collection,
getDocs,
} from "firebase/firestore"
import { db } from "@/firebase.js"
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()
})
})
.catch((error) => {
console.error("データの取得エラー:", error)
})
} else {
alert("ログインしてください。")
this.$router.push("/login")
}
},
methods: {
processLogs() {
if (this.Logs.length === 0) {
this.spotnum = 0
console.log("no spot or log")
} else {
this.spotnum = 1
for (let i = 0; i < this.Logs.length - 1; i++) {
if (this.Logs[i].spotname === this.Logs[i + 1].spotname) {
this.goodnum = this.goodnum + this.Logs[i].good
console.log("same")
} else {
this.goodnum = this.goodnum + this.Logs[i].good
}
}
for (let i = 0; i < this.Logs.length - 1; i++) {
if (this.Logs[i].spotname === this.Logs[i + 1].spotname) {
console.log("same")
} else {
this.spotnum++
}
}
}
},
onImageError() {
this.imageLoaded = false
},
},
}
<script>
status以外の画像取得の部分(正しく動いている方）
<template>
<div id="container">
<div
class="card"
v-for="(Log, i) in Logs"
:key="i"
v-on:click="viewcard(Log)"
>
<img :src="Log.url" id="logimg" />
<div class="name">{{ Log.name }}</div>
</div>
</div>
<template>
<script>
import { getAuth } from "firebase/auth"
import {
getFirestore,
where,
query,
collection,
getDocs,
deleteDoc,
} from "firebase/firestore"
import { db } from "@/firebase.js"
export default {
data: function () {
return {
Logs: [],
}
},
mounted() {
const auth = getAuth()
const user = auth.currentUser
const db = getFirestore()
if (user) {
const userUid = user.uid
// Firestoreクエリを作成してデータを取得
const q = query(collection(db, "card"), where("uid", "==", userUid))
getDocs(q)
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// ドキュメントのデータを取得し、Vueデータに追加
this.Logs.push(doc.data())
console.log(this.Logs)
})
// データの取得が完了した後に処理を実行
this.processLogs()
})
.catch((error) => {
console.error("データの取得エラー:", error)
})
},
methods: {
processLogs() {
if (this.Logs.length === 0) {
this.spotnum = 0
console.log("no spot or log")
} else {
this.spotnum = 1
for (let i = 0; i < this.Logs.length - 1; i++) {
if (this.Logs[i].spotname === this.Logs[i + 1].spotname) {
this.goodnum = this.goodnum + this.Logs[i].good
console.log("same")
} else {
this.goodnum = this.goodnum + this.Logs[i].good
}
}
for (let i = 0; i < this.Logs.length - 1; i++) {
if (this.Logs[i].spotname === this.Logs[i + 1].spotname) {
console.log("same")
} else {
this.spotnum++
}
}
}
},
onImageError() {
this.imageLoaded = false
},
},
}
<script>
0
