【cordova-react】外部から画像を読み込むための設定

snsアプリの開発においては画像を送信したりプロフィールに設定したりする機能は必須です。リサイズの方法やオリエンテーションの

 

設定方法など今までたくさんの先人のブログを見てきて試しては何度もハマりましたが、ようやくコツが掴めてきた感じがします。

 

がしかしcontent-security-policyの設定がまだ理解できていないのでよく触ってエラーを出してしまいます。

 

例えばこのrefused to load the imageというエラーは、base64画像を送る時にimg-srcの設定値がblobになっていないと送信を拒否します。

 

chromeAppが出しているwebViewタグを使う手がありましたが根っこから書き直しは骨が折れるので自分はこんな感じで修正しました。

 

[javaScript]
 img-src 'self' data: blob:;
[/javaScript]

 

これを直していないとchromeブラウザでは即落ちし、実機では画像は出ますがbase64のデータ文字列を読み取らなくなります。

 

長い道のりでしたがこれで全てのエラーを駆逐できたったぽいです。

 

参考にさせていただいたサイト↓

https://yakitama.goat.me/8VTjttQx

 

https://trycatchand.blogspot.com/2014/03/how-to-load-external-images-on-chrome-apps.html

 

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG