image - flutter中如何使用rootBundle加载图片？

Question

我使用图像插件 (image: ^2.0.4) 所以我可以在图像上写一些东西，然后将新图像保存到设备或通过邮件发送。我尝试使用“新文件”加载图像，但在 Flutter 上出现错误。我询问并搜索并得到提示，我可以使用 rootBundle 在 Flutter 中加载图像。我做到了，我得到了下面的错误。

[ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Unhandled exception: Unable to load asset: packages/myAppName/assets/images/ReceiptRaw_1.jpg

当我创建一个简单的 dart 控制台应用程序时，该插件可以工作，但无法使用 flutter 加载。请帮忙，

这是 Flutter 代码:

    Future<bool> makeReceiptImage() async {

// UPDATE ****************************************

      // load the receipt jpeg
  var imageData = await rootBundle.load('packages/myAppName/dekonts/ReceiptRaw_1.jpg');
  print("imageData: $imageData"); // Prints as imageData: Instance of 
'_ByteDataView'

// UPDATE ****************************************

  Image _receiptImage = await decodeImage(new File(imageData).readAsBytesSync());

      drawString(_receiptImage, arial_48, 440, 30, “Customer Name”, color: 0xFF000000); 

      // Write it to disk as a different jpeg 
      var new_jpeg = await encodeJpg(_receiptImage); 
      String newImagePath = await rootBundle.loadString('packages/myAppName/assets/images/ReceiptRaw_2.jpg'); 
      await new File(‘$newImagePath’).writeAsBytesSync(new_jpeg); 
    }

这是 Dart 控制台代码:

import 'dart:io';
import 'dart:convert';
import 'dart:async';
import 'package:image/image.dart';

void main() async {
  // load the receipt jpeg
  String mImagePath = 'images/ReceiptRaw_1.jpg';
  Image _receiptImage = decodeImage(new File(mImagePath).readAsBytesSync());
  drawString(_receiptImage, arial_48, 440, 30, “Customer Name”, color: 0xFF000000);

  // Write it to disk as a different jpeg
  var new_jpeg = encodeJpg(_receiptImage);
  new File('images/ReceiptRaw_1.jpg').writeAsBytesSync(new_jpeg);
}

更新 1: 当我使用下面的代码时，出现以下错误:

Error detected in pubspec.yaml: No file or variants found for asset: packages/myAppName/assets/images/ReceiptRaw_1.jpg

 String imageData = await rootBundle.loadString('packages/myAppName/assets/images/ReceiptRaw_1.jpg');
  Image _receiptImage = await decodeImage(new File(imageData).readAsBytesSync());

更新 2: 如果我使用 rootBundle.load 我会遇到以下错误。

Error: A value of type 'dart.typed_data::ByteData' can't be assigned to a variable of type 'dart.core::String'.

var imageData = await rootBundle.load('packages/myAppName/assets/images/ReceiptRaw_1.jpg');
  Image _receiptImage = await decodeImage(new File(imageData).readAsBytesSync());

新更新:

第 1 步: 将 ReceiptRaw_1.jpg 移动到 lib/dekonts/ 文件夹

更改为:

assets:
  - packages/myAppName/dekonts/ReceiptRaw_1.jpg

更改为:

var imageData = await rootBundle.load('packages/myAppName/dekonts/ReceiptRaw_1.jpg');
print("imageData: $imageData"); 

结果:打印为

imageData: Instance of '_ByteDataView'

第 2 步: 移动到 /lib/assets/images/ReceiptRaw_1.jpg 文件夹

更改为:

assets:
  - packages/myAppName/lib/assets/images/ReceiptRaw_1.jpg

更改为:

var imageData = await rootBundle.load('packages/myAppName/lib/assets/images/ReceiptRaw_1.jpg');
print("imageData: $imageData"); 

结果: 错误为:

Resolving dependencies... Running 'gradlew assembleDebug'... Error detected in pubspec.yaml: No file or variants found for asset: packages/myAppName/lib/assets/images/ReceiptRaw_1.jpg

更新:

/// To include, say the first image, the pubspec.yaml of the app should
/// specify it in the assets section:
///
/// assets: /// - packages/fancy_backgrounds/backgrounds/background1.png ///
/// The lib/ is implied, so it should not be included in the asset path.

Answer 1

pub 依赖的文件不能作为文件使用。它们包含在存档文件中。

将图像添加到 pubspec.yaml 中的 Assets 中

flutter:
  assets:
    - packages/myAppName/assets/images/ReceiptRaw_1.jpg

然后加载它

var imageData = await rootBundle.load('packages/myAppName/assets/images/ReceiptRaw_1.jpg');

为此，文件 ReceiptRaw_1.jpg 需要位于

myAppName/lib/assets/images/ReceiptRaw_1.jpg

其中 lib/ 部分是必需的。