[Monaca]画像ファイルをダウンロードした後の画面表示について

Question

monacaでアプリを開発しています。初心者です。
Fileプラグインを使用して、サーバー上の画像ファイルをスマホ内にダウンロードし、その後保存したファイルを画面に表示させようとしています。

以下のサイトのサンプルを元に、画像ファイルをLocalFileSystem.TEMPORARY内に保存することは出来ました。

ですが、その後保存したファイルを表示させる方法が分からずに困っております。
お教えいただけますと幸いです。よろしくお願いします。

ファイルを保存するためのコードは以下のとおりです。

    function okiniFile() {
        window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, onFileDL, onFileSystemFail);
    }

    function onFileDL(fileSystem) {
      // サンプルファイルを取得
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://（ドメイン名）/image.jpg', true);
      xhr.responseType = 'blob';
      xhr.onload = function() {
        if (this.status == 200) {
          console.log("200:" + this.response);
          // Blobデータに変換
          var blob = new Blob([this.response], { type: 'image/jpeg' });
          // ファイルを作成
          createFile(fileSystem.root, blob, "coupon-p01.jpg");
        }
      };
      xhr.send();
    }
    function onFileSystemFail(error) {
        console.log("error: " + error.code);
    }

    function createFile(dirEntry, fileData, fileName) {
    dirEntry.getFile(fileName, { create: true, exclusive: false }, 
      function (fileEntry) {
         // ファイルの保存先
        console.log(fileEntry.toURL());
        // ファイルへの書き込み
        writeFile(fileEntry, fileData);
      }, function(e) {
        console.log("error: " + e.code);
      }
    );
    }

    function writeFile(fileEntry, dataObj) {
    fileEntry.createWriter(function (fileWriter) {

      fileWriter.onwriteend = function() {
        console.log("Success write()");
        console.log(fileEntry);
      };
      fileWriter.onerror = function(e) {
        console.log("Failed file write: " + e.toString());
      };
      fileWriter.write(dataObj);
    });
    }
  </script>

Answer 1

MonacaDoc 画像ファイルの表示
を参考に

  <script>
    ons.ready(function() {
      okiniFile();
    });

    function okiniFile() {
      window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, onFileDL, onFileSystemFail);
    }

    function onFileDL(fileSystem) {
      // サンプルファイルを取得
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://ja.monaca.io/img/index-v2/section1_contents1.jpg', true);
      xhr.responseType = 'blob';
      xhr.onload = function() {
        if (this.status == 200) {
          console.log("200:" + this.response);
          // Blobデータに変換
          var blob = new Blob([this.response], { type: 'image/jpeg' });
          // ファイルを作成
          createFile(fileSystem.root, blob, "coupon-p01.jpg");
        }
      };
      xhr.send();
    }
    function onFileSystemFail(error) {
        console.log("error: " + error.code);
    }

    function createFile(dirEntry, fileData, fileName) {
      dirEntry.getFile(fileName, { create: true, exclusive: false }, 
        function (fileEntry) {
          // ファイルの保存先
          console.log(fileEntry.toURL());
          // ファイルへの書き込み
          writeFile(fileEntry, fileData);
        }, function(e) {
          console.log("error: " + e.code);
        }
      );
    }

    function writeFile(fileEntry, dataObj) {
      fileEntry.createWriter(function (fileWriter) {
        fileWriter.onwriteend = function() {
          console.log("Success write()");
          console.log(fileEntry);

          // 画像書き込めたので表示させる
          displayImageByFileURL(fileEntry);
        };
        fileWriter.onerror = function(e) {
          console.log("Failed file write: " + e.toString());
        };
        fileWriter.write(dataObj);
      });
    }

    // 画像書き込めたので表示させる
    function displayImageByFileURL(fileEntry) {
        var elem = document.getElementById('imageFile');
        elem.src = fileEntry.toURL();
    }
  </script>

こういうことでしょうか？