Firebase、Flutter Web App 在本地工作，但部署时不显示图片答案

【问题标题】：Firebase, Flutter Web App Works locally, but when deployed images are not shownFirebase、Flutter Web App 在本地工作，但部署时不显示图片
【发布时间】：2020-09-29 05:10:19
【问题描述】：

我有一个 Flutter Web 应用程序，它在本地运行良好，但在使用部署之后

firebase deploy

图片未显示在网站上，我已通过跟踪检查资产是否已上传，例如my_app.firebaseapp.com/assets/assets/card.jpg。（并且图片在那里，所以它已经正确上传，但由于某种原因它没有显示在主页本身上）。

网址：https://websitehostingtry.web.app/#/

https://websitehostingtry.web.app/assets/images/card.jpg

在本地运行时：

flutter run -d chrome --release

我的 Pubspec.yaml 文件：

name: website_try
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

  assets:
    - images/

在我的飞镖代码中，我只是将默认代码更改为在计数器后添加图像...

Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            Expanded(
              child: Image.network('assets/images/card.jpg'),
            )
          ],
        ),
      ),

【问题讨论】：

您是否测试过在其他浏览器上查看网站？我有一个投资组合网站，在 Chrome 上看起来很正常，但在 Safari 上，有时看不到图像。尝试不同的浏览器，也许我们可以更好地理解问题。
是的，我在 safari 和 chrome 上测试过，没有结果。我还尝试创建一个新的颤振网络应用程序，一个只显示一张图像的简单应用程序，但不起作用。

标签： firebase flutter firebase-hosting flutter-web

【解决方案1】：

我检查了您共享的页面，这是您部署到任何托管服务时的典型问题之一。它通常是由您访问图像的方式引起的。

您的一个网络请求 URL 在实时页面中如下所示。你可以在chrome的开发者工具中查看。

https://websitehostingtry.web.app/assets/card.jpg

当我检查 flutter_service_worker.js 时，它会显示以下资产所在的清单。

'use strict';
const CACHE_NAME = 'flutter-app-cache';
const RESOURCES = {
  "index.html": "7136835e515d34b7b84f2ae95aff570f",
"/": "7136835e515d34b7b84f2ae95aff570f",
"main.dart.js": "2368f8417bf6d56998d2eb9d8db6dc09",
"favicon.png": "5dcef449791fa27946b3d35ad8803796",
"icons/Icon-192.png": "ac9a721a12bbc803b44f645561ecb1e1",
"icons/Icon-512.png": "96e752610906ba2a93c65f8abe1645f1",
"manifest.json": "6c43261a82a59e92d3d5d2b6824ddd9a",
"assets/LICENSE": "34da31f697be5f2fcfacf877df9adb0a",
"assets/AssetManifest.json": "7701bf8932c1b66ef282029ec69bb8ee",
"assets/FontManifest.json": "01700ba55b08a6141f33e168c4a6c22f",
"assets/packages/cupertino_icons/assets/CupertinoIcons.ttf": "115e937bb829a890521f72d2e664b632",
"assets/fonts/MaterialIcons-Regular.ttf": "56d3ffdef7a25659eab6a68a3fbfaf16",
"assets/assets/card.jpg": "6cbe9266e9c097ee95ab2e2c36048ee8"
};

根据我的分析，我猜您的代码中您可能指的是如下图像。

Image.asset('/assets/card.jpg');

或

Image.network('/assets/card.jpg');

这将从根域映射，因此它会查找https://websitehostingtry.web.app/assets/card.jpg。

因此，一种方法是删除路径中assets 之前的附加正斜杠。例如

Image.asset('assets/card.jpg');

或者，如果您更喜欢 Image.network，那么以下操作也可以。

Image.network('assets/assets/card.jpg');

另一种更清晰的方法是创建一个新目录 images 并将 card.jpg 放在一边，以便清楚里面的内容。

基本原理是为了清楚起见按内容类型命名您的文件夹。

将pubspec.yaml改为

flutter:
  assets:
    - images/

然后将您的代码更改为以下。

Image.asset('images/card.jpg');

或

Image.network('assets/images/card.jpg');

希望这会有所帮助。

【讨论】：

如果这没有帮助，请分享您的pubspec.yaml 和您的文件夹结构以及您访问Image 的代码。
很高兴它对您有所帮助。 :)
我的 pubspec 资产是这样的 - assets: - assets/ - assets/bg1.jpg - assets/mayur2.jpg 我正在访问第三张图片，例如 Image.asset('assets /mayur2.jpg') 但是，仍然没有发生任何事情。

【解决方案2】：

问题：

pubspec.yaml

flutter:
  assets:
    - images/

最初，我在 Flutter 应用中加载图像

Image.asset("images/banner.png")

Web 应用程序在 localhost 上完美加载图像。但是，当我在 Firebase 主机上部署 Web 应用程序时，一切正常，只是图片无法加载！

解决办法：

我检查了 Firebase 托管部署

firebase deploy --debug

在终端中搜索banner.png发现图片上传了，但是正在通过不同的路径访问！

"/assets/assets/images/banner.png"

所以，我在加载图像时更改了访问路径，方法是在前面加上assets/，为

Image.asset("assets/images/banner.png")

现在，它会在 localhost 和 Firebase 托管上加载图像！

【讨论】：