如何解决如何将图像转换为网址?
我正在创建一个网络应用程序,我在其中接收来自用户的图像文件,然后必须将其存储在我的 Firebase 实时数据库中并以 Html 格式显示。由于实时数据库不支持文件,我必须为我的图像创建一个 URL。
我想要的 URL 不是像 this 这样的下载链接,它是我从 Firebase Cloud Storage Url 创建工具获得的,而是我需要一个像 this 这样的可见链接,我可以将它添加到 src我在 Html 中的标签是这样的:
<img src="The Url">
我尝试过使用 Firebase Cloud Storage,但是在上传图像文件时,图像是作为应用程序/octate-stream 而不是图像上传的。当我运行 geturl() 函数时,它给了我 this link ,这会导致一个下载页面,因此我不能将它指向标签的 src 属性。
var file_from_usr = document.getElementById('file_input')
var storageRef = firebase.storage().ref();
var thisRef = storageRef.child(filename);
thisRef.put(file_from_usr).then((snapshot) => {
console.log('Uploaded a blob or file!');
});
解决方法
这对我来说似乎是元数据问题。您的代码无法推断文件的类型,因此默认情况下,它会假定它是应用程序/八位字节流内容类型。
如果由于某种原因您的文件名没有扩展名或其他一些问题,那么您可以手动指定该内容类型元数据。
var metadata = {
contentType: 'image/jpeg',};
// Upload the file and metadata
var uploadTask = storageRef.child('images/mountains.jpg').put(file,metadata);
https://firebase.google.com/docs/storage/web/upload-files
或者,尝试为您的文件名添加扩展名。例如。 filename="myimage.jpg"
,使用 fetch api 下载图像数据并将其转换为 url,您可以将其设置为 image src 属性; Added the code snippet for the same below
。
此代码用于下载图像并跳过上传任务,这似乎像上面帖子中提到的那样工作。
getImageURL(url) {
const options = {
method: 'GET',mode: 'no-cors',cache: 'default'
};
return fetch(url,options).then((response) => {
return response.blob();
}).then(blob => {
return URL.createObjectURL(blob);
});
}
document.getElementById("myImg").src = getImageURL("https://{your_url_path}");
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。