Phonegap images not showing

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 directory 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

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

Answer 3

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.