monaca デバッグビルドするとサーバから画像を取得できなくなりました

Question

当方monaca　AngularJSで画像クイズアプリを作っています。
クイズの画像はサーバに保管してあるものを呼び出す形にしています。
monacaデバッガーをインストールした私の自前のスマホでは画像が読み込まれているのですが、デバッグビルドした際に画像が表示されなくなります。

なおアプリ設定で外部URLはデフォルトの＊ですべてのURLを許可しています。

画像URLの取得は以下ソースコードです。（app.js）
me.items.url = "http://＊＊＊.＊＊＊.jp/＊＊＊.jpg";

以下、htmlソースの画像表示部です。（index.html）

<p>この細胞は何ですか？ <img src={{game.items.url}}> </p>

当方、AngularJSおよびmonaca初心者のため、これから調査、勉強する中でこちらにも投稿させていただきました。
宜しくお願い致します。

Answer 1

AndroidなのかiOSなのかわかりませんが、Android 9～の場合、

Failed to load resource: net::ERR_CLEARTEXT_NOT_PERMITTED

というエラーが発生し、画像が表示されません。

config.xmlに以下のコードを追加することでエラーを回避できます。
※Monacaデバッグビルドで追加前、追加後で確認済みです。

①widgetタグに xmlns:android="http://schemas.android.com/apk/res/android" を追加。
②以下を追加。

  <platform name="android">
    <edit-config file="AndroidManifest.xml" target="/manifest/application" mode="merge">
      <application android:usesCleartextTraffic="true" />
    </edit-config>
  </platform>

※関連URL
https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted

Comments

[bonabona]

返信が遅くなり申し訳ありません！！
頂いたアドバイスでやってみますと、無事に動作しました！！
私の知識ではまだなぜできたのか、できなかったのかを理解することができませんが、引き続き調べて勉強致します。
こんな拙い説明にもかかわらずご回答いただきまして、誠に感謝申し上げます。
本当にありがとうございました。