質問: Monacaを使ったアプリ作りに挑戦しています。 やりたいことは、cdvfile プロトコルでアプリ内サンドボックスの画像を表示しようとしています。 そこで、以下のようなソースがあるのですが、上部の直接指定した場合、問題なく表示出来ました。 次に、場所を動的に作成したかった為、バインドさせようと下部のように試してみたところ、画像が表示されませんでした。 これは仕様なのでしょうか? 分かる方居ましたら、よろしくお願いします。 ``` ```
回答: 自己解決しました。 ソースを良く見てみると、src unsafeとあった為、画像が表示できませんでした。 cdvfileを使う際はセキュリティポリシーを設定しないといけない、と各サイトにありますが、Monacaを参考に設定すると上手く動作せず。 ``` ``` この、fefault-src 'self' の間にあるスペースを消すことで、認識してくれました。 ここは動作しない原因がわからず、本当に苦労しました・・・。 さらに認識させるにはもう人工夫が必要で、 ``` var app = angular.module('myApp'); app.config(function($compileProvider) { $compileProvider.imgSrcSanitizationWhitelist(/^\s*(cdvfile|file):|data:image\//); }); ``` ホワイトリストにcdvfileを追加しないといけませんでした。 なお、このconfigを追加してしまうと、ローカルsrcが認識しなくなった為、fileを追加しています。 詳しい動きは不明ですが、これで解決しましたので、今度参考になればと思います。