Ionic - E/Capacitor: Unable to open asset URL

Question

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

This is my capacitor.config.json

{
  ...,
  server: {
    cleartext: true,
    hostname: "rootsmenu.com",
    allowNavigation: [
      'localhost',
      'rootsmenu.com'
    ]
  }
}

Lovesome

Answer 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"
  }
}

Lovesome

Sir I have tried above solution but my changes not showing after build can you let me know why changes not showing? – Petaloid

According to the official documentation this should not be used in production, because its a security risk. – Kunkle

@Kunkle documents are not telling how to include external resources – Lovesome

There's also an older reference to allowMixedContent in Capacitor v2 docs: "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://". – Bacon