Phonegap images not showing - image

Question

I'm having trouble getting my images to work in my phonegap build.
I've read that the absolute paths might not work so i've tried both absolute and relative paths, still no luck.
I'm including the images like this:
<Col key={1} xs={3}>
<Image src='/tire_selected.png' responsive />
</Col>
or relative
<Col key={1} xs={3}>
<Image src='tire_selected.png' responsive />
</Col>
equals
<img class="img-responsive" src="tire_deselected.png" data-reactid=".0.0.1.0.0.0.0.1.1.0.0.$4.0">
Col & Image is bootstrap helper components using bootstrap-react. And this all works fine in the web view, but not when built with phonegap. It should though, the source is already compiled and without errors in both cases.
Following is my config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.app.exampleapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>App</name>
<description>
App
</description>
<author email="support#example.com" href="http://www.example.com">
Author
</author>
<content src="index.html" />
<preference name="permissions" value="none" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="14" />
<preference name="android-installLocation" value="auto" />
<gap:plugin name="org.apache.cordova.geolocation" />
<icon src="icon.png" />
<access origin="*" />
<plugin name="cordova-plugin-whitelist" version="1" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
Git repository:
app.js
vendor.js
config.xml
favicon.ico
humans.txt
index.html
robots.txt
tire_deselected.png
tire_selected.png
Icon.png works fine though. I have no idea whats causing the other images to not work. Any help would be appreciated!
Edit
I've tried setting content-security-policy, if that was the issue that i weren't able to set img-src and display images via javascript.
<meta http-equiv="Content-Security-Policy" content="
default-src http://10.3.10.104/ 'self' * 'unsafe-inline';
style-src http://10.3.10.104/ 'self' * 'unsafe-inline';
img-src http://10.3.10.104/ 'self' * 'unsafe-inline';
script-src http://10.3.10.104/ 'self' * 'unsafe-inline';">
But still no luck
file:///tire_deselected.png net::ERR_FILE_NOT_FOUND
There file is there, because when inserting an img-element into index.html it's displayed.
I even tried accessing it by the path that's displayed in the source folder running developer tools.
file:///data/user/0/com.oas.exampleapp/files/downloads/app_dir/tire_deselected.png
Doesn't work either, i'm starting to think that phonegap is broken, atleast works very poorly in combination with react.

Answer 1

After compilation the build.phonegap.com put your source files into "www" directory.
You can access your local image file using the following path "/android_asset/www/"
<image src='/android_asset/www/tire_selected.png' responsive />
If your image is placed in a subdirectory inside the root direcctory then you can use the following:
<image src='/android_asset/www/sub-direcctory/tire_selected.png' responsive />
Note: replace the "sub-direcctory" with your own if there is any in which the local image file is contained.

Answer 2

I added an img tag to index.html and set the src attribute to "images/logo.png" and it loads without issue.
...
<body>
<div id="root"></div>
<img id="footer-logo" src="images/logo.png" style="background-color: black; width: 200px;" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/vendor.bundle.js"></script>
<script src="js/app.bundle.js?v=2"></script>
</body>
</html>
I have a react component with an img tag and the same src value "images/logo.png"
...
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0px; padding-top: 0px; letter-spacing: 0px; font-size: 24px; font-weight: 400; color: rgb(48, 48, 48); height: 64px; line-height: 64px; flex: 1 1 0px; text-align: center;">
<img id="header-logo" src="images/logo.png" style="width: 105px; margin-top: 16px;">
</div>
...
The img in the react component doesn't load; 404. Yet this equates to true
document.getElementById('footer-logo').src === document.getElementById('header-logo').src
How is it that one of the images loads and the other doesn't? Does it have something to do with the react component being loaded into the DOM dynamically or react's virtual DOM?
The src attributes equate to file:///images/logo.png. IF I set the src attribute on the #header-logo like this, it loads:
document.getElementById('header-logo').src = cordova.file.applicationDirectory + "www/images/logo.png"
Hope this provides more info to this very bizarre behaviour.

Answer 3

Hope this helps. So I also had the problem.
What I did was, was to create a another folder /images/ (duplicate) and still use my images I imported via react via my /static/components/images folder. You can take it a bit further by adding conditionals for staging or live.
So the answer is here.:
import Logo from '../images/logo.png';
<img src={`./${Logo}`} alt="Logo" />
Full example.:
import React, { Component } from 'react';
import Logo from '../images/logo.png';
class Header extends Component {
render() {
return(
<div className="logo mt-3">
<img src={`./${Logo}`} alt="Logo" />
</div>
);
}
}
export default Header;
Got the idea from this post.: Images not showing in PhoneGap Build application