我如何显示我的图像从Firebase存储到我的网站?

Question

<template>
<div>
<input type="file" id="dosya" @change="putDesign()" />
</div>
</template>
<script>
import { initializeApp } from "firebase/app";
import { getStorage, ref, uploadBytes, listAll } from "firebase/storage";
const firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
};
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);
export default {
data() {
return {
fileName: "",
resim: "",
photos: [],
};
},
methods: {
mounted() {
// Create a reference under which you want to list
const listRef = ref(storage, "design/");
// Find all the prefixes and items.
listAll(listRef)
.then((res) => {
res.prefixes.forEach((folderRef) => {
// All the prefixes under listRef.
// You may call listAll() recursively on them.
console.log(folderRef);
});
res.items.forEach((itemRef) => {
// All the items under listRef.
this.photos.push(itemRef+ " ");
});
})
.catch((error) => {
// Uh-oh, an error occurred!
console.log(error);
});
},
};
</script>

我可以添加文件到我的Firebase存储，但我不能在我的网站上显示它们。我可以获得本地存储位置，但我无法获得访问令牌，因此我无法打开或显示照片。有办法获得访问令牌吗?我搜索了Firebase文档，但找不到任何有用的。

Answer 1

您只需要获得文件夹中每个元素的downloadURL。它可以像这样:

import { initializeApp } from "firebase/app";
import { getStorage, ref, uploadBytes, listAll, getDownloadURL } from "firebase/storage";
const firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
};
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);
export default {
data() {
return {
fileName: "",
resim: "",
photos: [],
};
},
methods: {
mounted() {
// Create a reference under which you want to list
const listRef = ref(storage, "design/");
// Find all the prefixes and items.
listAll(listRef)
.then((res) => {
res.prefixes.forEach((folderRef) => {
// All the prefixes under listRef.
// You may call listAll() recursively on them.
console.log(folderRef);
});
res.items.forEach((itemRef) => {
// All the items under listRef.
getDownloadURL(itemRef).then(downloadURL=>{
this.photos.push(downloadURL);
})

});
})
.catch((error) => {
// Uh-oh, an error occurred!
console.log(error);
});
},
};