我创建了一个使用网络图像和资产图像的flutter web
项目,在我的PC上调试时一切正常,但当我将其部署到Web服务器时,网络图像工作正常,但资产图像根本不显示。当我在Web浏览器控制台中检查页面时,我得到以下错误:
$1 @ window.dart:120
/assets/slack.png:1 Failed to load resource: the server responded with a status of 503 ()
window.dart:120 Error while trying to load an asset: Failed to load asset at "assets/slack.png" (503)
$1 @ window.dart:120
/assets/flutterLogo.png:1 Failed to load resource: the server responded with a status of 503 ()
window.dart:120 Error while trying to load an asset: Failed to load asset at "assets/flutterLogo.png" (503)
$1 @ window.dart:120
/assets/kross.jpg:1 Failed to load resource: the server responded with a status of 503 ()
window.dart:120 Error while trying to load an asset: Failed to load asset at "assets/kross.jpg" (503)
$1 @ window.dart:120
/assets/codingRocket2.png:1 Failed to load resource: the server responded
9条答案
按热度按时间sbtkgmzw1#
对于Flutter Web 3.0:
你的出版规范。yaml:
测试者:
部署:
对我很有效!
gcmastyq2#
在我的例子中,只有在移动浏览器中才有一个奇怪的错误(因为桌面或本机移动的中没有错误),所以请确保在连接到移动设备时,使用chrome上的远程调试器检查您部署的应用程序。
chrome://检查/器械数量
当前有效的解决方案...
第一个
wpcxdonn3#
1.请先检查assets文件夹是否在Web文件夹中。
1.访问资产时,尝试写入“assets”两次。例如-“assets/assets/slack. png”
af7jpaap4#
在我的例子中,这是由于资产文件夹中的图像的权限。
如果出现以下消息:
您可能需要在服务器上使用
ls -la
检查图像文件的权限我有以下几点:
然后将它们更改为public read with:
输出量:
并重新加载您的index.html,现在应该工作!
l2osamch5#
您也许应该检查该文件是否可作为部署的一部分使用。
404
是您收到的资源未找到的常见错误代码。503
与服务器可用性或服务器错误有关。我将执行以下操作。步骤1.检查
build
文件夹尝试在项目中运行
flutter build web
命令并检查build文件夹。我希望在我的
build\web\assets
文件夹中有以下内容。如果此操作不起作用,则需要检查
pubspec.yaml
文件并更正路径。步骤2:检查您的托管文件夹
请确保上面显示的文件在承载此文件夹的服务器上可用。还要验证服务器是否有专门针对图像文件或图像文件类型进行的任何配置。
r1wp621o6#
您应该将照片添加到pubspec.yaml文件中,并将您的资产文件夹上传到Web服务器。可能是关于不上传文件夹的问题
68bkxrlz7#
只要用flutter 2.2.0来做这个,那么你就万事俱备了。
xxe27gdn8#
在Web浏览器上运行Flutter代码时,无法加载网络图像。这是因为HTML渲染器问题。
您可以使用以下命令运行flutter代码或编辑运行的android studio设置。
flutter运行-d chrome --网页渲染器html
抖动网页上的图像渲染问题的两种可能的解决方案。在此处检查https://youtu.be/U0Ez4CS6frc
gblwokeq9#
我的是完美的工作与发展,当我部署的建设标志是失踪。
我在构建Web资源时使用HTML呈现修复了该问题