尝试使用 fetch 获取图像，图像存储在 firebase 存储中答案

【问题标题】：trying to get image using fetch, the image is stored in firebase storage尝试使用 fetch 获取图像，图像存储在 firebase 存储中
【发布时间】：2020-01-19 03:21:34
【问题描述】：

嘿，我正在尝试使用 fetch API 获取图像，该 URL 是有效的，因为当我将图像 URL 放入 Img 标记时它可以工作。

我的获取函数：

   getImage = () => {  
   const url= "https://firebasestorage.googleapis.com/v0/b/alpha-c790f.appspot.com/o/images%2Frivers.jpg?alt=media&token=6a96d672-23c1-425f-bdca-47f6d73608f0"


fetch(this.state.url,{
  mode: 'no-cors'
}).then(response => response.blob())
.then((res)=>{
     console.log(res);
    var objectURL = URL.createObjectURL(res);
    var myImage = new Image();
    myImage.src = objectURL;

}).catch(err=>{
  console.log(err);
})
}

firebase 云存储访问规则：

      rules_version = '2';
      service firebase.storage {
      match /b/{bucket}/o {
           match /{allPaths=**} {
           allow read, write: if request.auth != null;
           }
        }
    }

我想这样实现它，因为我想在它上面放一个微调器，直到图像出现

我得到的回应是这样的

           Blob {size: 0, type: ""}
                 size: 0
                 type: ""
            __proto__: Blob

【问题讨论】：

安全规则对下载 URL 没有任何影响。但我不明白为什么您需要调用 fetch 来获取指向您已经拥有该 URL 的文件的 URL。
网址是图片，我正在尝试获取图片
但是图片已经存在于该网址，只需将网址添加到您的图片标签上的 src 即可。无需提取。请编辑您的问题以包含问题，您要实现什么目标？

标签： reactjs firebase firebase-storage

【解决方案1】：

您不需要获取图片，该图片已存在于该网址https://firebasestorage.googleapis.com/v0/b/alpha-c790f.appspot.com/o/images%2Frivers.jpg?alt=media&token=6a96d672-23c1-425f-bdca-47f6d73608f0

<img src='https://firebasestorage.googleapis.com/v0/b/alpha-c790f.appspot.com/o/images%2Frivers.jpg?alt=media&token=6a96d672-23c1-425f-bdca-47f6d73608f0'/>

如果您想以程序方式构建图像，您也可以这样做：

var newImgage = new Image() 
newImgage.src = 'https://firebasestorage.googleapis.com/v0/b/alpha-c790f.appspot.com/o/images%2Frivers.jpg'

【讨论】：

这是正确的，但你能显示如何将 url 添加到图像标签上的 src 的代码吗？这将是一个更完整的答案。
是的，我知道这一点。你可以做 var img = new Image() 然后也许 img.src = link
@jay 我不确定如何在问题的上下文中回答它，因为我的回答使问题无效。您是要我展示如何以程序方式构建图像吗？我可以回答这个问题，但我觉得我会回答一个不同的问题。我添加了 paramveer 的方法只是为了更好地衡量。