JazzCat JazzCat - 1 year ago 153
React JSX Question

Phonegap images not showing

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

or relative

<Col key={1} xs={3}>
<Image src='tire_selected.png' responsive />


<img class="img-responsive" src="tire_deselected.png" data-reactid=".$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">
<author email="support@example.com" href="http://www.example.com">
<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 name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />

Git repository:


Icon.png works fine though. I have no idea whats causing the other images to not work. Any help would be appreciated!


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 'self' * 'unsafe-inline';
style-src 'self' * 'unsafe-inline';
img-src 'self' * 'unsafe-inline';
script-src '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.


Doesn't work either, i'm starting to think that phonegap is broken, atleast works very poorly in combination with react.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download