我有一个Ffltter Web应用程序,在本地运行良好,但在部署后使用

firebase deploy

这些图片没有显示在网站上,我已经判断了这些assets资源 是否通过追踪上传,例如我的_apply.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'),
            )
          ],
        ),
      ),

enter image description here

推荐答案

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

在live页面中,您的一个网络请求URL如下所示.你可以在chrome的开发者工具中查看这一点.

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

当我判断flutter_service_w或ker.js时,它显示以下assets资源 所在的列表.

'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.netw或k('/assets/card.jpg');

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

因此,一种方法是删除路径中assets%之前的额外前锋劈开.例如

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

或者,如果你更喜欢Image.netw或k,那么下面的方法就行了.

Image.netw或k('assets/assets/card.jpg');

另一种更清晰的方法是创建一个新的目录image,并将card.jpg放在该目录的一侧,这样它就可以清楚地看到里面是什么.

为清楚起见,基本原理是按内容类型命名文件夹.

pubspec.yaml更改为

flutter:
  assets:
    - images/

然后将代码更改为下面的代码.

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

Image.netw或k('assets/images/card.jpg');

希望这能帮上忙.

Flutter相关问答推荐

Flutter -使用最小高度展开

为什么Riverpod生成器在这种情况下不生成AsyncNotiator?

Riverpod状态管理-在调用请求时更新用户界面

CLI数据库连接后将SHA-1密钥添加到Firebase项目

在setState之后,Ffltter ListView.Builder未更新

从.gitignore中排除.fvm/fvm_config.json

使用持久的侧边菜单和顶部栏在Ffltter Web应用程序中的页面之间导航

Flutter:无法构建iOS应用程序-找不到PigeonParser.h文件

如何更改Flutter 中文本的混合模式?

当 Dart SDK 版本范围不匹配时,为什么依赖解析器不会抛出错误?

如何在 Flutter 中创建厚度沿着容器逐渐减小的边框

如何更改中心的圆形进度指示器

Getx Flutter 在更新值时抛出空错误

如何在椭圆形图像周围添加边框?Flutter

Firebase Cloud Messaging (Flutter):订阅主题时出现错误消息

gridview 的所有按钮都应该在Flutter 中适合其父容器

在 Flutter 中单击时切换按钮 colored颜色 没有改变

Navigator.push '!_debugLocked' 上的错误:不正确

如何将所有行项目平等地放在一行中?Flutter

将容器扩展到安全区域 - Flutter