gpt4 book ai didi

Firebase、Flutter Web App 可在本地运行,但未显示部署的图像

转载 作者:行者123 更新时间:2023-12-03 13:29:31 25 4
gpt4 key购买 nike

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

firebase deploy
图像未显示在网站中,我已检查 Assets 是否已通过跟踪上传,例如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'),
)
],
),
),
enter image description here

最佳答案

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

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

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

当我查看 flutter_service_worker.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.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 is to name your folder by content type for clarity.



更改 pubspec.yaml

flutter:
assets:
- images/

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

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

或者

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

希望这可以帮助。

关于Firebase、Flutter Web App 可在本地运行,但未显示部署的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62292512/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com