Firebase，Flutter Web App在本地运行，但是未显示部署的图像 [英] Firebase, Flutter Web App Works locally, but when deployed images are not shown

问题描述

我有一个流畅的网络应用程序，该应用程序在本地运行良好，但是使用

  firebase部署 

图片未显示在网站上，我已检查资产是否已通过跟踪上传，例如my_app.firebaseapp.com/assets/assets/card.jpg.(并且图像在那里，因此它已正确上传，但是由于某种原因它没有显示在首页上).

网址:

解决方案

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

您的一个网络请求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":"6c43261a82a59e92d3d5d2b6824dd​​d9a"，资产/许可证":"34da31f697be5f2fcfacf877df9adb0a"，"assets/AssetManifest.json":"7701bf8932c1b66ef282029ec69bb8ee"，"assets/FontManifest.json":"01700ba55b08a6141f33e168c4a6c22f"，资产/包/cupertino_icons/资产/CupertinoIcons.ttf":"115e937bb829a890521f72d2e664b632"，资产/字体/MaterialIcons-Regular.ttf":"56d3ffdef7a25659eab6a68a3fbfaf16"，资产/资产/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'); 

另一种更清晰的方法是创建一个新的目录图像，并将card.jpg放在侧面，以便其内部清晰可见.

为清楚起见，Rationale会按内容类型命名您的文件夹.

将 pubspec.yaml 更改为

  flutter:资产:- 图片/ 

然后将您的代码更改为关注.

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

或

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

希望这会有所帮助.

I have a flutter web app which works well locally but after deploying it using

firebase deploy

the images are not shown in the website, I have checked if the assets have been uploaded by tracing, e.g. my_app.firebaseapp.com/assets/assets/card.jpg. (And the image is there, so it has uploaded properly but for some reason its not being displayed on the homepage itself).

Url: https://websitehostingtry.web.app/#/

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

when running the same locally:

flutter run -d chrome --release

My Pubspec.yaml file:

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/

In my dart code I just changed the default code to add Image after counter...

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

解决方案

I checked the page you shared, this is one of the typical issues when you deploy to any hosting service. Its usually caused by the way you access the image.

One of your network request URL looks like this in the live page. You can check this in the developer tools of chrome.

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

when I checked the flutter_service_worker.js it shows the following listing where the assets are.

'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"
};

Based on my analysis I am guessing in your code you are probably referring to the image as follows.

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

or

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

This will map from the root domain and hence its looking up for https://websitehostingtry.web.app/assets/card.jpg.

So one approach would be to remove the additional forward slash before assets in the path. for e.g.

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

Or if you prefer Image.network then following would work.

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

Another approach and clearer one would be to create a new directory images and place the card.jpg in side that so that its clear whats inside.

Rationale is to name your folder by content type for clarity.

Change pubspec.yaml to

flutter:
  assets:
    - images/

Then change your code to following.

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

or

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

Hope this helps.

这篇关于Firebase，Flutter Web App在本地运行，但是未显示部署的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！