Unable to use images from document directory in JavaScript file

Question

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.

have you tried altering the src URL with the localhost directory path example : `src="localhost:port/var/mobile/Containers/Data/Application/395E5EED-2FB4-4505-861E-2DA9AB96433B/Documents/my_image.jpg/"` — Saubar, May 14 '15 at 07:18
@anusha-k I feel like you have 1 missing forward slash and one extra. Change to: ``pinInfoBox.setHtmlContent('
'+pin.Title+'
')``. This example will only work if the image serving page is also opened from file:/// location. When the serving page is opened from url (eg. http://foo.com) this will never work. — tiblu, May 14 '15 at 07:29
@tiblu I didn't understand. my .js file is in application bundle and and loading dynamically. When desired location information is received, a method in .js file is called with image path(which is in document directory). Is there any problem in that? — Anusha Kottiyal, May 14 '15 at 08:33
@anusha-k Try the suggestion above to fix the image source. I added the extra notice just in case. If it is an application bundle, I guess it should be fine. But I lack experience with the bundles. — tiblu, May 14 '15 at 08:42
@anusha-k Sorry, now when I think about it, maybe ``file:///`` is disabled for a reason. You could possibly reference any another bundles files if it was allowed. Sorry for long-shotting here, but this may be related - http://stackoverflow.com/questions/747407/using-html-and-local-images-within-uiwebview — tiblu, May 14 '15 at 08:51
@tiblu Bundle file will work directly with the imageName just like in other objective c file. But this document directory path not working. — Anusha Kottiyal, May 14 '15 at 09:13
@tiblu Answer was in your `extra notice`. But I can't write images to bundle. So I copy my javaScript file to document directory. Now I can dynamically load image directly specifying its name only. No need of root directory components. Thank you..:) — Anusha Kottiyal, May 14 '15 at 12:13

score 0 · Accepted Answer · answered Jul 29 '15 at 08:19

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>');

Unable to use images from document directory in JavaScript file

1 Answers1