英文:
I want to wrap the firebase image path in v-for
问题
在这种情况下，您可以尝试以下方式：
v-img(:src="getImageSrc(item.id)")
methods: {
async getImageSrc(id) {
const skinId = this.$store.getters['skin/getSkinId']
const state = this.$store.getters['skin/getSkinState']
const storageRef = this.$fire.storage.ref()
const imageRef = storageRef.child(`skin/${id}_${skinId}${state}.webp`)
try {
const url = await imageRef.getDownloadURL()
return url
} catch (error) {
console.error(error)
return '' // 或者返回一个默认图片URL或错误处理的URL
}
}
}
这里的主要更改是使用 async/await 来处理异步操作，并在 getImageSrc 方法中等待 getDownloadURL 的结果。如果出现错误，您可以选择返回一个默认图片URL或者一个表示错误的URL，以便在加载失败时显示备用内容。
英文:
I'm not a developer, so the question might look stupid. I ask for your understanding.
There is an existing code with v-for
v-tab-item(
v-for="(item, index) in getCharacterSkinList"
:key="index"
)
v-img(:src="require('~/static/img/skin/' + item.id + '_' + getSkinId + getSkinState + '.webp')"
Current Changes
v-tab-item(
v-for="(item, index) in getCharacterSkinList"
:key="index"
)
img(:src="imageSrc")
export default {
mounted() {
const skinId = this.$store.getters['skin/getSkinId']
const state = this.$store.getters['skin/getSkinState']
const storageRef = this.$fire.storage.ref()
this.getCharacterSkinList.forEach((item, index) => {
const imageRef = storageRef.child(
`skin/${item.id}_${skinId}${state}.webp`
)
imageRef
.getDownloadURL()
.then((url) => {
this.$set(this.imageSrc, index, url)
})
.catch((error) => {
console.log(error, imageSrc)
})
})
this.$store.dispatch('skin/asyncCharacterSkin')
},
}
in this case, getters works successfully.
but failed to load item.id.
I tried
v-img(:src="getImageSrc(item.id)")
methods: {
getImageSrc(id) {
const skinId = this.$store.getters['skin/getSkinId']
const state = this.$store.getters['skin/getSkinState']
const storageRef = this.$fire.storage.ref()
const imageRef = storageRef.child(`skin/${id}_${skinId}${state}.webp`)
return imageRef.getDownloadURL()
},
}
I tried to change it to method, but it did not work because returned prosmised.
What other ways can I try?
答案1
得分: 1
getDownloadURL()是一个异步方法，因此你应该将你的方法声明为async，并使用await，如下（未经测试）：
async getImageSrc(id) {
const skinId = this.$store.getters['skin/getSkinId']
const state = this.$store.getters['skin/getSkinState']
const storageRef = this.$fire.storage.ref()
const imageRef = storageRef.child(`skin/${id}_${skinId}${state}.webp`)
const downloadURL = await imageRef.getDownloadURL();
return downloadURL;
}
英文:
getDownloadURL() is an asynchronous method so you should declare your method as async and use await, as follows (untested):
async getImageSrc(id) {
const skinId = this.$store.getters['skin/getSkinId']
const state = this.$store.getters['skin/getSkinState']
const storageRef = this.$fire.storage.ref()
const imageRef = storageRef.child(`skin/${id}_${skinId}${state}.webp`)
const downloadURL = await imageRef.getDownloadURL();
return downloadURL;
},
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论