Apex Code Development You need to sign in to do that
Don't have an account?
admintrmp Loading images with Javascript
We are trying to load images using Javascript by simply appending straight HTML to a page element. Within the HTML we have the following:
<img src="img/nextIcon.png" />
But for some reason, we are being shown a blue box with a question mark in it (meaning that the image could not be found).
We are currently developing a Hybrid app with jQuery mobile. I know you all have the solution to this because you have working apps. So how do we get our image to display correctly?
This is not a case-sensitive issue, and the path is correct.
Thanks for your help.
Is the HTML/JS client-side in your app or are you using Visualforce?
Sorry, the application is client-based so all of our HTML, Javascript and resources are held on the mobile device.
Our images are stored locally in a folder named "img" so we would normally look for our image at img/newIcon.png.
Great webinar yesterday by the way! Unfortunate there wasn't more on Hybrid development, but was still useful. :o)
Thanks!
Hmm, that's weird. You should be able to access your local images like that. You're able to access .css and .js files okay, though? Are you seeing any errors in LogCat?
Our JS and CSS files are loaded perfectly.
Our images are not being loaded at all. We have tested just using the image tag hardcoded into the HTML and that does not load either.
I'm wandering if there is supposed to be a specific URL we should be using to access local images (although our other resources are working fine, so I shouldn't see why).
That is very weird. I'm not sure at all would could cause that.
I know what you mean. It's not exactly a rocket science bit of code.
How have you done it in any of your Hybrid apps?
Mostly with CSS, but conceptually the paths should be the same.
It may be worth noting that jQuery mobile renders it's images as expected when building nested list views. I think they are using CSS though. Perhaps we could test CSS instead.
I'm having a very similar issue.
I posted on another topic about this as well: http://boards.developerforce.com/t5/Mobile/Display-image-on-mobile/m-p/281751/highlight/false#M12
In short, I have images which are attachments in salesforce, and which appear in a PhoneGap implementation and just web browsers just fine. However, when I load the pages through the Salesforce Mobile SDK, I get the question mark with the blue box as mentioned above.
The issue you are having is not similar. The issue we were having is that our local images were not displaying. Our developers have corrected this by loading the image into the project. Eclipse assumed that the image existed when it did not for some reason.
The issue you are having is that you cannot load images that need authentication to view. This issue may well be resolved by adding an oauth token to the end of your image URL as the link below will describe:
http://blogs.developerforce.com/developer-relations/2011/03/accessing-chatter-user-pics.html