【问题标题】:How to retrieve image's url from Firebase's storage?如何从 Firebase 存储中检索图像 url?
【发布时间】:2017-07-02 20:43:12
【问题描述】:

我有这个代码直接来自 Firebase 的文档:

// Create a reference to the file we want to download
  var user = firebase.auth().currentUser.uid;
  var storageRef = firebase.storage();
  var pathReference = storageRef.ref('/' + user + '/profilePicture/' + image.name);

  //var starsRef = storageRef.child('/' + user + '/profilePicture/' + file.name);

  // Get the download URL
  pathReference.getDownloadURL().then(function(url) {
  // Insert url into an <img> tag to "download"
      $scope.imageUrl = url;
      console.log($scope.imageUrl);
  });

但我不知道在我的 html 文件中写什么才能显示图像...有什么帮助吗?

【问题讨论】:

    标签: javascript angularjs firebase ionic-framework firebase-storage


    【解决方案1】:

    只需将结果放在控制器的变量中和 HTML 上的 ng-src 中。

    最好是使用服务来获取 URL,而不是直接在控制器中。

    控制器

    app.controller('MyController', ['$scope', function($scope) {
        // Create a reference to the file we want to download
        var user = firebase.auth().currentUser.uid;
        var starsRef = storageRef.child('/' + user + '/profilePicture/' + file.name);
    
        // Get the download URL
        starsRef.getDownloadURL().then(function(url) {
        // Insert url into an <img> tag to "download"
            $scope.imageUrl = url;
        });
    }]);
    

    HTML

    <img ng-src="{{imageUrl}}"/>
    

    【讨论】:

    • 您好,感谢您的帮助,它会在我的图片周围显示 css,但图片本身没有显示(还)。我在 imageUrl 上尝试了 console.log,但也没有显示任何内容。可能是什么原因?
    • 您应该尝试调试的是放置 console.log(url) 而不是 imageUrl。如果你想调试 imageUrl 你应该做console.log($scope.imageUrl)
    • 糟糕的是我忘记引用存储了。现在我遇到的最后一个问题是“文件”没有定义。知道如何获得这些数据吗?否则一切正常;)
    • 这取决于您的代码。如果您在 file.name 之前未定义文件,则将未定义。这应该只是您在 Firebase 存储中的图像的文件名
    猜你喜欢
    • 1970-01-01
    • 2017-09-16
    • 2020-10-23
    • 1970-01-01
    • 1970-01-01
    • 2020-07-10
    • 2021-09-25
    • 2017-08-30
    相关资源
    最近更新 更多