第一个颤动图像显示，但不是第二个

Posted 2023-02-23

【中文标题】第一个颤动图像显示，但不是第二个

【英文标题】：First flutter image displays, but not the second

【发布时间】：2020-12-12 10:10:52

【问题描述】：

问题

TMORA.png 未显示。

演练

图像出现在我的代码中：

flutter 抛出的错误：

资产 images/TMORA.png 不存在。 尝试创建文件或修复文件的路径。飞镖（asset_does_not_exist）[51,8]

不过，图像确实存在。当我点击 assets/images 文件夹时，我可以看到它。

我认为问题源于我的 yaml 文件（如下所示）。

完整的代码（注释掉 TMORA.png 行以消除错误）出现在 Github。

注意：我在这个包中有两个名为 images 的文件夹。一个是项目资产文件夹，其中包含一个图像文件夹，其中包含要在应用程序屏幕上显示的 2 张图像。第二个是一个图像文件夹，其中包含我的 github 自述文件的图像。我混淆了吗？

pubspec.yaml 文件：

name: second_app_Heather
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In ios, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
     - images/
     - images/museumInterior.png
     - images/TMORA.png
    #- images/TMORA.png
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages
 

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

编辑：

为了回应@Anis R. 的建议（因为我想很多人会建议这个），我已努力实施该建议并收到以下错误：

编辑#2。回复 Anis R 的第二条有用评论。

这就是问题所在... Internet 资源对于在 iPhone/Android 按钮、背景和其他小部件上放置您想要使用的图像的位置有点不切实际。我不确定什么是常规/正确的。

一些消息来源建议将照片放在根目录内的图像文件夹中（橙色箭头Example recommendation here）。一些消息来源建议将照片放在资产文件夹中（绿色箭头 Example recommendation here- 见第 1 小时，第 43 分钟）。有些人建议将照片放在资产文件夹内的图像文件夹中（橙色箭头 - 这是我尝试的）。

所以，当我采用 Anis R 的代码建议（我认为遵循惯例）时，我收到了解释问题所在的错误消息。

现在，这对我来说似乎是一个难以克服的错误。如果 .yaml 文件找不到 assets 文件夹，那我就难住了。我是新手，我认为我无法弄清楚这一点。我以前肯定见过这个错误。

这让我想知道，“好吧，如果它看不到资产文件夹，那么它到底是如何显示museumInterior.png 照片的？”两张照片都位于同一个文件夹中。还是他们？

不。它从未从 assets\images 文件夹中提取图像。它不知道 assets\images 文件夹存在。它一直在从我为我的 github README.md 存储照片的图像文件夹中提取图片。里面有很多东西。名为museumInterior.png 的图像恰好也在其中。 我将 TMORA.png 的副本放在 images 文件夹中，它会显示在我的屏幕上。

我和 Visual Studio Code 一样，会假装包含 images 文件夹的 assets 文件夹甚至不存在。

我不认为这是惯例，但它确实运行正常。

非常感谢@Anis R. 引导我完成这一切！有时你只需要说出来。

【参考方案1】：

在您的pubspec.yaml 中，您应该使用：

- assets/images/

而不是

- images/

---

编辑您的更新

我回顾了你的代码并更新了 cmets，你需要在几个地方更改一些代码。

首先，在您的Home_widget.dart 中，替换Image.asset('images/museumInterior.png') 和Image.asset('images/TMORA.png')

分别使用Image.asset('assets/images/museumInterior.png') 和Image.asset('assets/images/TMORA.png')。

然后在您的pubspec.yaml 文件中，在assets: 下，仅保留条目- assets/images/ 并删除其他条目。

最后，在您的项目上运行 flutter clean 并重建。

如果这有帮助，请告诉我。

【讨论】：

我相信我尝试实现文件路径的所有可能组合，并选择了错误最少的选项。那是通过简单地使用-images/。但是，我再次将您的建议放在那里，只是为了检查并发布显示生成错误的 3 个屏幕截图。我当然希望我没有从文件夹中的文件夹构建它。

它在以下情况下显示：1.) Home_widget.dart 使用 Image.asset('images/TMORA.png') 和 2.) pubspec.yaml 在 assets: 部分使用 -images/。跨度>

嗯，很高兴你终于让它工作了。祝你有美好的一天！