javascript - 如何将 Firebase 存储中的图像显示到我的网站?
问题描述
<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 文档,但找不到任何有用的东西。
解决方案
您只需要获取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);
});
},
};
推荐阅读
- javascript - 使用 js animate 缩放背景图像 - 得到抖动的图像
- hibernate - 为什么hibernate会无缘无故地创建连接?
- python-3.x - 如何将时间戳转换为字符串以保存数字?
- image - 如何使用 Inception Network 进行回归
- sql-server - Azure SQL 数据库:错误 18456 状态 122 导致与数据库警报触发器的连接失败
- c# - UWP 中的最佳实践运动图形和触摸应用程序
- vue.js - Vue - 如何动态导入组件
- angular - 等待 foreach 中可观察的几个 rxjs 直到完成执行另一个
- python - 如何使用 PythonOCC 导入参数引用?
- python - 在 Python2.6+ 中为 Solaris 创建 netstat 的实现