title: How to use rootBundle in flutter to load images?
body: <p>I use image plugin (<strong>image: ^2.0.4</strong>) so I can write something on to the image and later save it new image to device or send via mail. I try to load image using "<strong>new File</strong>" but got error on Flutter. I ask and search and got a hint that I can use rootBundle to load image in Flutter. I did, and I got this below error. </p>
  
  <blockquote>
    <p>[ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Unhandled exception:
     Unable to load asset: packages/myAppName/assets/images/ReceiptRaw_1.jpg</p>
  </blockquote>
  
  <p>The plugin works when I create a simple dart console app, but couldn't load  using flutter. Any help please,</p>
  
  <p><strong>This is the Flutter Code:</strong></p>
  
  <pre><code>    Future&lt;bool&gt; 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); 
      }
  </code></pre>
  
  <p><strong>This is the Dart Console Code:</strong></p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p><strong>Update-1:</strong>
  When I use below code I get en error as:</p>
  
  <blockquote>
    <p>Error detected in pubspec.yaml:
    <em>No file or variants found for asset: packages/myAppName/assets/images/ReceiptRaw_1.jpg</em></p>
  </blockquote>
  
  <pre><code> String imageData = await rootBundle.loadString('packages/myAppName/assets/images/ReceiptRaw_1.jpg');
    Image _receiptImage = await decodeImage(new File(imageData).readAsBytesSync());
  </code></pre>
  
  <p><strong>Update-2:</strong>
  if I use <code>rootBundle.load</code> I got below error.</p>
  
  <blockquote>
    <p>Error: A value of type 'dart.typed_data::ByteData' can't be assigned to a variable of type 'dart.core::String'.</p>
  </blockquote>
  
  <pre><code>var imageData = await rootBundle.load('packages/myAppName/assets/images/ReceiptRaw_1.jpg');
    Image _receiptImage = await decodeImage(new File(imageData).readAsBytesSync());
  </code></pre>
  
  <p><strong>New Update:</strong></p>
  
  <p><strong>Step 1:</strong>
  Move to <code>ReceiptRaw_1.jpg</code> into <code>lib/dekonts/</code> folder</p>
  
  <p><strong>Change to:</strong></p>
  
  <pre><code>assets:
    - packages/myAppName/dekonts/ReceiptRaw_1.jpg
  </code></pre>
  
  <p><strong>Change to:</strong></p>
  
  <pre><code>var imageData = await rootBundle.load('packages/myAppName/dekonts/ReceiptRaw_1.jpg');
  print("imageData: $imageData"); 
  </code></pre>
  
  <p><strong>Result:</strong> Prints as </p>
  
  <blockquote>
    <p>imageData: Instance of '_ByteDataView'</p>
  </blockquote>
  
  <p><strong>Step 2:</strong>
  <strong>Move to</strong> <code>/lib/assets/images/ReceiptRaw_1.jpg</code> folder</p>
  
  <p><strong>Change to:</strong></p>
  
  <pre><code>assets:
    - packages/myAppName/lib/assets/images/ReceiptRaw_1.jpg
  </code></pre>
  
  <p><strong>Change to:</strong></p>
  
  <pre><code>var imageData = await rootBundle.load('packages/myAppName/lib/assets/images/ReceiptRaw_1.jpg');
  print("imageData: $imageData"); 
  </code></pre>
  
  <p><strong>Result:</strong>  Got Error as:</p>
  
  <blockquote>
    <p>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</p>
  </blockquote>
  
  <p>Update:</p>
  
  <blockquote>
    <p>/// To include, say the first image, the <code>pubspec.yaml</code> of the app should<br>
    /// specify it in the assets section:<br>
    ///<br>
    ///  assets:
    ///    - packages/fancy_backgrounds/backgrounds/background1.png
    ///<br>
    /// The <strong><code>lib/</code> is implied</strong>, so it should not be included in the asset  path.  </p>
  </blockquote>