Phonegap images not showing

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.


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.

Tags:

Image

Phonegap Build

Reactjs

Recent Posts