微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在vuetify v-carousel中使用v-bind显示来自Firebase存储网络的图像?

如何解决如何在vuetify v-carousel中使用v-bind显示来自Firebase存储网络的图像?

我有一个VueJS项目连接到Firebase Firestore和Firebase Storage。

将所有图片的网址下载到Firebase存储中后,我无法将这些图片绑定到v-carousel,我不知道我的错误在哪里

这是我的旋转木马:

<v-carousel>
    <v-carousel-item v-for="image in images" 
                     :key="image.id" 
                     :src="image.src" />
</v-carousel>

这是我的下载网址代码

import { storage } from "@/firebase/init";
import { db } from "@/firebase/init";
import { images } from "@/firebase/init";

export default {
    data() {
        return {
            images: true,};
    },created() {
        var storageRef = storage.ref();
        storageRef
            .child("Carousel/")
            .listAll()
            .then(function (result) {
                let i = 1;
                result.items
                    .forEach(function (imgRef,i) {
                        // console.log(imgRef.toString());
                        imgRef.getDownloadURL().then(function (url) {
                            //  console.log(url)
                            let ImageUrl = url;
                            images.push({ src: ImageUrl + ".jpg",id: i });
                        });
                        i++;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            });
        console.log(images);

        itms.push(urls);
    },};

init.js文件

import * as firebase from "firebase/app";
import "firebase/firestore";
import "firebase/storage";

// Your web app's Firebase configuration
var firebaseConfig = {
    // ......
};

firebase.initializeApp(firebaseConfig);
// export default firebaseApp.firestore()

export default firebase.firestore();

export var storage = firebase.storage();
export let images = [];

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。