I am storing user specific images getting from server in document directory. Then I want to display this images on bing map at certain pins(inside pin InfoBox). I am loading the images dynamically using javaScript. But images are not displaying on map.
I am setting images as HTML content of infoBox like,
pinInfoBox.setHtmlContent('<div class="arrow_box"><div class="content" id="content"><img id="localFile" src="file:///var/mobile/Containers/Data/Application/395E5EED-2FB4-4505-861E-2DA9AB96433B/Documents/my_image.jpg/"/>'+pin.Title+'</div></div>');
If I use any remote file and access it via http protocol it will work,
pinInfoBox.setHtmlContent('<div class="arrow_box"><div class="content" id="content"><img id="localFile" src="http://a.abcd.com/static/images/zoom/magnifying-glass.png" />'+pin.Title+'</div></div>');
I don't know why it is not taking image saved in my document directory.
Please help me to resolve this.
I solved this based on @tiblu's comment.
JavaScript file and images should be in same path.
But I can't write images to bundle as these images are downloaded from server at runtime. So I copied JavaScript file to documentDirectory during application launch to work with images. Then we can simply access the image directly with it's name and no need of specifying full path.
pinInfoBox.setHtmlContent('<div class="arrow_box"><div class="content" id="content"><img id="localFile" src="my_image.jpg"/>'+pin.Title+'</div></div>');