如何将图像转换为网址？

问题描述

我正在创建一个网络应用程序，我在其中接收来自用户的图像文件，然后必须将其存储在我的 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}");

firebase firebase firebase html imageurl javascript