How to dynamically load images in a capacitor in a native environment?

Capacitor
1

I have classic web folders structure like:

index.html

images/logo.png

js/index.js

I would like to add the logo.png to using jQuery appendTo function:

        $("<img/>", {

            src: "images/logo.png"

        }).appendTo("body");

It works fine on web platform, but I get 404 error on Android or iOS platform. Probably, it has to do something with the build process as

npm run build

command calls

vite build

which creates structure in /dist folder and

npx cap sync

command uses the /dist folder instead of the web folder.

Do I have to specify in some config what should be copied during build or how can I achieve the same behavior on the web, Android and iOS platforms?

2

In our Vue app, we put images in /public/assets/test.png and then on build, Vite copies them to /dist/assets/test.png.

In our code, we reference them as follows:

<img src="/assets/test.png" />