FadeInImage.assetNetwork 需要绝对路径。占位符的相对路径不起作用。（颤抖）

Question

我正在通过 FadeInImage.assetNetwork 显示图像，这需要两个成员：image 和 placeholder。

    ClipRRect(    //forcing image to rounded corners
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(15),
        topRight: Radius.circular(15),
      ),
      child: FadeInImage.assetNetwork(
        image: imageUrl,
        placeholder: '/Users/aayush/Documents/Flutter/Apps/meals_app/assets/images/food-placeholder.png', //here full path is necessary. relative path is not working.
        // placeholder: '../../assets/images/food-placeholder.png',  //this relative path is not working.
        height: 250,
        width: double.infinity,
        fit: BoxFit.cover, //will resize and crop the image
      ),
   ),

这是我的文件夹结构：

目前我在 lib/widgets/meal_item.dart，占位符图像位于 assets/images/food-placeholder.png。

所以，我的相对路径是：../../assets/images/food-placeholder.png。当我尝试在此处使用相对路径时出现错误消息：

════════ Exception caught by image resource service ════════════════════════════
The following assertion was thrown resolving an image codec:
Unable to load asset: ../../assets/images/food-placeholder.png

When the exception was thrown, this was the stack
#0      PlatformAssetBundle.load
package:flutter/…/services/asset_bundle.dart:224
<asynchronous suspension>
#1      AssetBundleImageProvider._loadAsync
package:flutter/…/painting/image_provider.dart:672
<asynchronous suspension>
Image provider: AssetImage(bundle: null, name: "../../assets/images/food-placeholder.png")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#df521(), name: "../../assets/images/food-placeholder.png", scale: 1.0)

我试了很多次，但它只在这个小部件中不起作用。相对路径在其他小部件中运行良好。请给我解决方案或建议，以便我可以显示占位符图像，直到获取 url 图像。

这是完整的屏幕截图：

Answer 1

您必须在 `Pubspec.yaml` 文件中指定图像位置。

这就是将资产添加到 flutter 项目的方式。

之后你可以使用如下图片：

FadeInImage.assetNetwork(
    image: imageUrl,
    placeholder: 'assets/images/food-placeholder.png',
    height: 250,
    width: double.infinity,
    fit: BoxFit.cover,
),

将图像路径添加到发布规范后，您必须停止当前运行会话，然后重建或重新运行应用程序。

试试这个命令。

flutter clean
flutter pub get
flutter run

Answer 2

对于相对路径，创建这样的路径

 'assets/images/food-placeholder.png'

并确保您已像这样

在pubspec.yaml中的资产中添加图像路径

assets:
- assets/images/

FadeInImage.assetNetwork 需要绝对路径。占位符的相对路径不起作用。（颤抖）

FadeInImage.assetNetwork requires absolute path. Relative path for placeholder is not working. (in flutter)

flutter

dart

relative-path

placeholder

absolute-path

这是我的文件夹结构：

您必须在 `Pubspec.yaml` 文件中指定图像位置。

这就是将资产添加到 flutter 项目的方式。

FadeInImage.assetNetwork 需要绝对路径。占位符的相对路径不起作用。 （颤抖）

FadeInImage.assetNetwork requires absolute path. Relative path for placeholder is not working. (in flutter)

flutter

dart

relative-path

placeholder

absolute-path

这是我的文件夹结构：

您必须在 Pubspec.yaml 文件中指定图像位置。

这就是将资产添加到 flutter 项目的方式。

FadeInImage.assetNetwork 需要绝对路径。占位符的相对路径不起作用。（颤抖）

您必须在 `Pubspec.yaml` 文件中指定图像位置。