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.

I add the bootstrap tag. This does not appear to be related to Phonegap. — , Mar 30 '16 at 12:23
How so? The images are working fine everywhere except when phonegap builds the app. Issue has nothing to do with bootstrap. — JazzCat, Mar 31 '16 at 05:55
Disagree. This NOT a phonegap issue. If you remove the bootstrap and use standard HTML, the images will show up. The only exception \*could\* be is the images are store off the device - which is not the case. Since you think you are smarter - Best of Luck. — , Mar 31 '16 at 12:43
The HTML is standard HTML, it is compiled. I'm sorry if that was unclear. But you should know that if you've built a phonegap app from a git repo. — JazzCat, Mar 31 '16 at 14:14
If you dont have any constructive comments or tips. Don't bother. — JazzCat, Apr 01 '16 at 06:49
I did have a tip - as a suggestion. Best of Luck. I won't respond any further. — , Apr 01 '16 at 07:22
'Try again' ... :) I'm having this issue with two different projects and i've tried multiple approaches to try to solve this, only thing i can think of is that something in the config.xml file is missing that makes the images not accessible. — JazzCat, Apr 01 '16 at 07:35
I cannot stress enough you need to rethink your process. **source** https://github.com/jessemonroy650/try-image-load **working demo - Android** https://build.phonegap.com/apps/1996356/share — , Apr 01 '16 at 08:02
Im also able to show images that way, placing the elements inside index.html, but using the react components it doesnt work. The code sould be the same just that the second is generated with javascript. — JazzCat, Apr 01 '16 at 08:28
***I cannot stress enough you need to rethink your process.*** Best of Luck — , Apr 01 '16 at 09:37
Rethink my process, stop using react and phonegap together? What are you trying to say? — JazzCat, Apr 01 '16 at 09:41
Again, stop replying if you aint got some input with actual value. — JazzCat, Apr 01 '16 at 09:48

Imran Ali · Accepted Answer · 2016-04-08T18:39:47.400

6

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.

edited Apr 08 '16 at 18:39

answered Apr 05 '16 at 12:24

Imran Ali

454
2
8

Thanks! I'll check and confirm that the images are inside that path tomorrow. – JazzCat Apr 05 '16 at 18:42
Sure, just give it a try and let me know if it works. – Imran Ali Apr 06 '16 at 04:36
I'm having the same problem using react with phonegap, and this workaround does the trick, but why do you need to have the src setup like that? I understand that /android_asset/www is physically where phonegap places the folders/assets, but if I hardcode an img (html) element outside of the react rendered space, using the src of the img without the /android_asset/www, works wonders, which leads me to think that for some reason react is doing something weird with the paths – codingcthulhu Aug 10 '16 at 02:56
What I'm thinking is happening with react is the HTML is being injected into the page via javascript and similar to setting a background image url the path to the image is relative to where the css file is. I tried using a relative path in my webpack.config but that didn't work. I think absolute paths for react img src value may be the only way to go. – SomethingOn Oct 07 '16 at 18:10

score 2 · Answer 2 · answered Oct 07 '16 at 18:46

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.

score 0 · Answer 3 · answered Apr 16 '19 at 18:30

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

Phonegap images not showing

3 Answers3

Linked