我想在 v-for 中包装 firebase 图像路径

Question

我不是开发人员，所以这个问题可能看起来很愚蠢。我请求你的理解。

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')"

当前变化

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')
    },
}

在这种情况下，吸气剂成功运行。 但无法加载 item.id.

我试过了

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()
    },
}

我试图将其更改为方法，但它没有用，因为返回承诺。

我还可以尝试哪些其他方法？