Search code examples
javascriptsveltecapacitor

Images not showing in capacitor svelte app

I'm trying to port my svelte app into capacitor to make it a mobile app. I was able to create an android build and run it on my phone and on my android emulator, the problem is that the images are not showing.

android image

To give you some context my app is pretty much a random image generator, pulling a different image from a remote url every time you click a button. The images are showing on the web no problem, but for some reason in my phone and on android emulator they don't work.

I don't know if this is relevant but the images come from an http address and not https, I think the issue is probably to do with permissions of some kind but I don't know what configuration to change. This is my capacitor.config.ts file:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.moviesapp.chrispoulsen',
  appName: 'movies-app',
  webDir: 'build',
};

export default config;

Thanks to anyone who can help me.

Solution

  • By default, neither Android nor iOS allow http connections anymore. You have to use https connections or configure your app to allow http traffic.