こんにちは。

monacaでアプリを作成しています。

画像の描画を早めるため画像をダウンロードしてキャッシュとして利用しようと考えています。

技術サイトで紹介されていた下記のソースを参考にネット上にある画像ファイルを端末のストレージに保存することができました。

iOSでは確認できていないのですが、Androidでは

alert('ダウンロード成功 '+filePath);

で表示されるパスに画像が確かに保存されます。

ローカルに保存された画像のパスはAndroidでは

「file:///storage/emulated/0/test.png」

となっています。

function onDeviceReady() {
    requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
    rootDir = fileSystem.root.toURL();
    alert('画像のダウンロードを開始するよ');
    var fileTransfer = new FileTransfer();
    //ダウンロードするURL
    var url = encodeURI('https://secure.elephancube.jp/dltestapp/120305.png');
    //保存するパス
    var filePath = rootDir + 'test.png';
    fileTransfer.download(url, filePath, function(entry) {
        alert('ダウンロード成功 '+filePath);
    }, function(error) {
        alert('ダウンロードエラー '+error.code);
    });
    }, function(e) {
        alert('ファイルアクセスエラー');
    });
}

しかし、端末にダウンロードした画像を表示するにはどうすればよいのかが分かりません。。

<div class="center"><img ng-src="filePath"  height="100%"/></div>

このような感じで記述すると画像と同じ大きさの枠は表示されるのですが
画像が壊れているようなアイコン出て中身が表示されません。

パスの部分を直書きしてみたのですが、それでも上手くいきませんでした。

もしかしてそもそもアプリからアクセス出来ないのか、単純に端末のストレージのパスだけでは表示することが出来ないのか、色々と調べてみたのですが解決できず困っています。

どなたかご教授いただけましたら幸いです。

どうぞよろしくお願い致します。

追記

kumapandaさん、ita_3yさん回答ありがとうございます！
kumapandaさんのコードを参考にさせていただき画像を保存して表示できるようになりました！

しかしダウンロード元を

「https://secure.elephancube.jp/dltestapp/120305.png」

から

ニフティバックエンドを使った公開URL

「https://mb.api.cloud.nifty.com/2013-09-01/applications/hJMH0uH9SKHOV08T/publicFiles/120305.png」

へ変更すると何故か画像表示されません。。

image.srcには"data:image/png;base64,PCFET・・"

とファイルは格納されているようです。

表示部分は

document.getElementById('preview_field').appendChild(image);
reader.readAsDataURL(file);
document.getElementById('preview_field').innerHTML =
'file name: ' + file.name';

html部分は

＜div id="preview_field">

と記述しています。

引き続き恐縮ですがアドバイスいただけると幸いです。