Firebase，Flutter Web App可在本地工作，但部署时不显示映像

5rgfhyps 于 2023-06-30 发布在 Flutter

关注(0)|答案(3)|浏览(154)

我有一个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/

在我的 dart 代码中，我只是改变了默认代码，在计数器后添加图像...

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'),
            )
          ],
        ),
      ),

firebase

来源：https://stackoverflow.com/questions/62292512/firebase-flutter-web-app-works-locally-but-when-deployed-images-are-not-shown

3条答案

按热度按时间

h43kikqp1#

我检查了你分享的页面，这是你部署到任何托管服务时的典型问题之一。它通常是由您访问图像的方式引起的。
您的一个网络请求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');

这将从根域Map，因此它查找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');

希望这能帮上忙。

赞(0）回复(0）举报 2023-06-30

fcipmucu2#

问题：

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托管，一样！

赞(0）回复(0）举报 2023-06-30

kd3sttzy3#

pubspec.yaml

assets:
- assets/images/

请记住，当您处于调试模式时，必须执行此操作

Image.network('assets/images/pic.jpeg')

但是当web应用被部署时，它应该这样写：

Image.network('assets/assets/images/pic.jpeg')

您必须在资产路径前添加一个额外的 assets/，以便在部署时可以正常工作
所以使用这种方法：

导入此文件

import 'package:flutter/foundation.dart';

定义一个字符串，该字符串将根据DevelopmentMode取值

String releasePath = kDebugMode ? '' : 'assets/';

在项目中的任何地方使用此字符串，如下所示

Image.network('${releasePath}assets/images/pic.jpeg')
你们都可以走了

赞(0）回复(0）举报 2023-06-30

我来回答

Firebase，Flutter Web App可在本地工作，但部署时不显示映像

3条答案

相关问题

热门标签

最新问答