Firebase 存储不显示 Flutter Web 中链接的图像

Question

我正在尝试在 Flutter 的图像小部件中显示我的图像。就是这么简单的功能。但我尝试了太多的事情。这是行不通的。我打开了 FirebaseStorage 部分并激活了它。我调用 Firebase 函数来下载 URL。但图像没有显示在我的小部件中。我尝试在 dart 部分破坏 firebase 版本。但它还没有发挥作用。我该如何解决它？

这是我发布的图像链接：（它可以在浏览器中使用，但不能在 flutter web 应用程序中使用） https://firebasestorage.googleapis.com/v0/b/commerce-fe056.appspot.com/o/mail.png?alt=media&token=6f57a585-25ae-44c9-ad12-15efea5d9163

这是我的版本号：

 firebase_core: ^2.17.0
  cloud_firestore: ^4.9.3
  firebase_auth: ^4.10.1
  firebase_storage: ^11.5.5
  cached_network_image: ^3.3.1

这是我的功能代码：

 @override
  void initState() {
    super.initState();
    // Set the initial value of imageUrl to an empty string
    imageUrl = '';
    imageUrl1 = '';
    //Retrieve the imge grom Firebase Storage
    getImageUrl();

  }


  Future<void> getImageUrl() async {
    // Get the reference to the image file in Firebase Storage
    final ref = storaged.ref().child("mail.png");
    final ref1 = storaged.ref().child("files/faild.png");
    // Get teh imageUrl to download URL
    final url = await ref.getDownloadURL();
    final url1 = await ref1.getDownloadURL();
    setState(() {
      imageUrl = url;
      imageUrl1 = url1;
    });
  }

最后，这是我的小部件：

 CachedNetworkImage(
      imageUrl: imageUrl,
      placeholder: (context, url) => CircularProgressIndicator(),
      errorWidget: (context, url, error) => Icon(Icons.error),
    ),




    SizedBox(
        height: 300,
        child: Image(
          image: NetworkImage(imageUrl),
          fit: BoxFit.cover,
        )),
    Card(
      child: SizedBox(
          height: 300,
          child: Image(
            image: NetworkImage(imageUrl1 , ),
            fit: BoxFit.cover,
          )),
    ),

另外，你可以检查我的控制台：

Answer 1

按照 @MendelG 建议使用 HTML 渲染器确实可以缓解 CORS 的问题。然而，HTML 渲染器的性能要差得多，并且在更复杂的屏幕中清晰可见，它们不能以 60FPS 运行。

由于您正在管理 Firebase 存储，因此我建议正确设置 CORS 设置，您可以阅读更多相关内容，例如此处：Firebase 存储和访问控制允许来源

Answer 2

查看有关在网络上显示图像的文档。

具体来说，CORS 部分：

...它的设计是这样的，默认情况下，一个网站不允许使用 XHR 或 fetch 向另一个网站发出 HTTP 请求。这可以防止另一个站点上的脚本代表用户执行操作并在未经许可的情况下访问另一个站点的资源。

---

如所讨论的，一种解决方案是使用 HTML 渲染器。因此，在终端中运行该项目：

flutter run -d chrome --web-renderer html // to run the app

flutter build web --web-renderer html --release // to generate a production build

---

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final imageUrl =
      'https://firebasestorage.googleapis.com/v0/b/commerce-fe056.appspot.com/o/mail.png?alt=media&token=6f57a585-25ae-44c9-ad12-15efea5d9163';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: CachedNetworkImage(
            imageUrl: imageUrl,
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
        ),
      ),
    );
  }
}

---

我建议阅读我分享的上述链接。