Firebase 存储无法正确显示图像（显示一个小框）

Question

我的页面上有一个 Tinymce RTE，当你将图像放入编辑器时，我有一些功能可以将它上传到 firebase 存储，然后用从 firebase 获取的 url 交换文本编辑器的 src。它工作得很好，但它显示为一个断开的链接图像图标。

当我检查链接时，是因为它最初是在单击链接时下载图像的。我在上传时添加了一个元数据属性，但现在它只显示一个小框。

这是将图像放入编辑器的代码上传到 firebase 存储

const imagesUploadHandler = async (blobInfo, success, failure) => {
    try {
      const file = blobInfo.blob();
      const storageRef = ref(storage, file.name);
      const metadata = {
        contentType: 'image/jpeg',
      };
      
      await uploadBytes(storageRef, file, metadata);
      const url = await getDownloadURL(storageRef);
      console.log(url);
      return url;
    } catch (error) {
      // Call the failure callback with the error message
      console.log(error.message);
    }
  };

最初，我没有包含 contentType 元数据，它只是作为 application/octet-stream 上传，我想这就是它提示您保存图像的原因。

图片链接：https://firebasestorage.googleapis.com/v0/b/cloudnoise-news.appspot.com/o/ref.jpg?alt=media&token=1edc90e7-1668-4a06-92a3-965ce275798b

目前显示这个

我检查过的东西

• firebase 存储规则处于测试模式，因此应该可以被任何人读取和写入。
• 我尝试使用不同的 MIME 类型，但它要么显示小框，要么显示“未定义”
• 文件上传成功，Tinymce编辑器中的“swap”也一切正常

知道为什么会这样吗？

Answer 1

需要设置元数据标签

const metadata = {
  contentType: file.type,
};

这应该确保在将图像上传到 Firebase 存储时设置正确的内容类型。

如果这不能解决问题，您可能需要检查从 getDownloadURL 返回的 URL 是否有效并指向正确的图像。您可以尝试在新的浏览器选项卡中打开 URL 以验证图像是否可访问。