Firebase Storage图片无法正常显示（显示小方框）求助

已更新CORS配置，但仍存在相同问题。

页面使用Tinymce RTE，拖入图片时通过函数上传至Firebase Storage，再将编辑器中图片的src替换为Firebase返回的URL。流程整体可行，但图片显示异常：

• 初始上传时contentType为application/octet-stream，点击图片链接会触发下载；
• 添加contentType: 'image/jpeg'元数据后，图片仅显示为小方框。

上传代码 #

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);
    }
  };

当前情况 #

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

已排查内容 #

• Firebase Storage规则为测试模式，允许任何人读写；
• 尝试过不同MIME类型，要么显示小方框，要么显示"undefined"；
• 文件上传成功，Tinymce编辑器中的src替换正常。

问题原因分析 #

1. 硬编码的contentType与实际文件类型不匹配
   代码中固定设置contentType: 'image/jpeg'，但如果拖入的是PNG、WebP等其他格式图片，会导致MIME类型不匹配，浏览器无法正确解析渲染。应从原始文件获取真实MIME类型：

   const metadata = {
     contentType: blobInfo.blob().type || 'image/jpeg',
   };
   

2. 未正确调用Tinymce的success回调
   Tinymce自定义上传处理器需要调用success(url)通知编辑器上传完成并替换图片src，当前代码仅return url未触发该回调，可能导致编辑器无法正确处理URL。修改代码：

   const url = await getDownloadURL(storageRef);
   console.log(url);
   success(url); // 必须调用此回调
   return url;
   

3. Firebase存储的文件元数据未正确生效
   即使上传时指定了metadata，可能存在缓存或上传过程中未正确应用的情况。可手动在Firebase控制台查看该图片的元数据，确认contentType是否与实际图片格式匹配。

4. 浏览器缓存残留旧配置
   之前错误的contentType可能被浏览器缓存，即使后续修正元数据，浏览器仍使用旧的缓存响应。可尝试清除浏览器缓存后重新测试。

内容的提问来源于stack exchange，提问作者RedFish