方法

今回はkintoneに保存されている画像をMonacaアプリ内に表示してみます。

main.js

fetch(`https://omj-f.cybozu.com/k/v1/file.json?fileKey=${fileKey}`, {
    headers: {
        'x-cybozu-api-token': token
    }
})
    .then(response => response.blob())
    .then(blob => {
        $scope.imgPath = (window.URL || window.webkitURL).createObjectURL(blob)
    })
    .catch(error => console.error(error.stack));

また、このままではCSPのエラーが出てしまいますので、index.htmlに以下のmetaタグを追加する必要があります。

index.html

<meta http-equiv="Content-Security-Policy"
          content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * blob:; media-src *">

追加したのは、img-src * blob:; media-src *の部分ですね。

あとはimgタグのsrc属性にバインディングするようにすればOKです。

<img ng-src="{{imgPath}}">

[Monaca] kintoneからFetch APIで取得した画像を、アプリ内に表示させる

方法

参考