0

I can't load any image from external url in real device. I am always getting the following error:

enter image description here

This is my capacitor.config.json

{
  ...,
  server: {
    cleartext: true,
    hostname: "rootsmenu.com",
    allowNavigation: [
      'localhost',
      'rootsmenu.com'
    ]
  }
}
A. Khaled
  • 1,468
  • 16
  • 28

1 Answers1

1

I edited capacitor.config.ts with following configs and it worked! Also, I was editig the wrong file android/app/src/main/assets/capacitor.config.json. Because it was replaced with capacitor.config.ts content each time I ran npx cap sync android

capacitor.config.ts

{
  ...
  "android": {
    "allowMixedContent": true
  },
  "server": {
    "cleartext": true,
    "hostname": "localhost"
  }
}
Kalnode
  • 9,386
  • 3
  • 34
  • 62
A. Khaled
  • 1,468
  • 16
  • 28
  • Sir I have tried above solution but my changes not showing after build can you let me know why changes not showing? – Kapil Soni Jul 31 '22 at 01:57
  • According to the [official documentation](https://capacitorjs.com/docs/config#schema) this should not be used in production, because its a security risk. – Gereon99 Aug 09 '22 at 08:48
  • @Gereon99 documents are not telling how to include external resources – A. Khaled Aug 27 '22 at 17:17
  • There's also an older reference to `allowMixedContent` in [Capacitor v2 docs](https://capacitorjs.com/docs/v2/config): "On Android, if you are loading the app from a remote/testing server from https protocol, you need to enable mixed content mode to allow the WebView to load files from different schemes such as `capacitor-content://` or `capacitor-file://`". – Kalnode Jan 06 '23 at 14:55