cordova android vue avd resource public image

Issue

I followed this tutorial and coded my own android cordova app:

https://www.npmjs.com/package/vue-cli-plugin-cordova

I added the images for my app to the public folder. My whole folder looks like this:

my-app2:
|-.git
|-node_modules
|-public --> there are my images in the img folder, the index.css in the css folder and the index.html as main entry point
|-src --> there is my Sourcecode folder which works fine
|-src-cordova --> In this folder are the settings for my app (config.xml)
|-tests
|-.gitignore
|-babel.config
|-cypress
|-my-release-key.keystore
|-package
|-package-lock
|-README.md
|-vue.config
|-yarn.lock

The public folder contains all images and the main entry point of my app: the index.html-File

I referenced to these image files with this relative path:

img/weiss.png

Now I run the following command and everything works as desired.

npm run cordova-serve-browser

And after that I built it with cordova for android:

npm run cordova-build-android

Then I installed it on my avd and doesn't get these images displayed. (You have to install jdk 1.8, gradle, android studio, android sdk ...)

My question is now, how can I reference to these images and what do I have to set in my configuration of cordova?

Solution

I solved the problem.

It was about the router configuration. You don't have to use the mode history. Always use the mode

hash

Here is my router:

'use strict'
import Vue from 'vue'
import VueRouter from 'vue-router'

Answered By - Ziegler_P