PDA

View Full Version : PhoneGap (iOS Simulator) - Unable to display/load images [?]




jcdb83
Aug 21, 2012, 08:56 PM
I am currently using jQuery Mobile (PhoneGap) - HTML5 + CSS5 + JavaScript and then I convert it into Xcode that supports jQuery Mobile (PhoneGap) before deploying it to iTunes store but I notice some of the images [?] does not appear on iOS Simulator yet I tested web app and it works (100% - all the images can load/display) but slow loading due to server unlike iOS Simulator because it runs pretty normal.

I notice small icons work but not the big icons like size width - 740, height - 430. I think no matter if the image is big or small, I believe it can work on iOS Simulator right? How can I solve it? Please help me if you know where the problem lies.

I put all of the images folder under "www" (Xcode folder). I even write the code like e.g.

<img src="Images/abc.png" width="740" height="430">

Do you know where the problem lies? It will be great if you could help me. Thanks. Your help will be appreciated.



Duncan C
Aug 21, 2012, 09:26 PM
I am currently using jQuery Mobile (PhoneGap) - HTML5 + CSS5 + JavaScript and then I convert it into Xcode that supports jQuery Mobile (PhoneGap) before deploying it to iTunes store but I notice some of the images [?] does not appear on iOS Simulator yet I tested web app and it works (100% - all the images can load/display) but slow loading due to server unlike iOS Simulator because it runs pretty normal.

I notice small icons work but not the big icons like size width - 740, height - 430. I think no matter if the image is big or small, I believe it can work on iOS Simulator right? How can I solve it? Please help me if you know where the problem lies.

I put all of the images folder under "www" (Xcode folder). I even write the code like e.g.

<img src="Images/abc.png" width="740" height="430">

Do you know where the problem lies? It will be great if you could help me. Thanks. Your help will be appreciated.


Your question is specific to PhoneGap. You should edit your post and change the subject to include PhoneGap so you can attract people who know that framework. (I don't know anything about it.)

PhoneyDeveloper
Aug 21, 2012, 10:16 PM
Have you verified that the images are present in your bundle where you expect them to be?

jcdb83
Aug 22, 2012, 12:04 AM
Your question is specific to PhoneGap. You should edit your post and change the subject to include PhoneGap so you can attract people who know that framework. (I don't know anything about it.)

Thanks. I have edited the title name - I hope people can help me with that.

----------

Have you verified that the images are present in your bundle where you expect them to be?

Yes I have. All the images are inside in the image folders. I have checked already. I also attempt to test another image name to see if it works or not but it shows same. Do you know why?

robbieduncan
Aug 22, 2012, 03:59 AM
Check the case. Images is probably not the same as images...

jcdb83
Aug 22, 2012, 05:51 AM
Have you verified that the images are present in your bundle where you expect them to be?

Check the case. Images is probably not the same as images...

Well, I really put the correct folder name - "Images". Anyway, I test web app and all of the images are working. But when I move all of the folders into www folder to run iOS Simulator. Some of the images [?] are not working. Some of the images are working. I am really puzzled. I know all images must be in PNG format. Right? Is there other way for me to test? Btw, I add 1 image into "Images" folder to test if it works but it shows same. I am confused. One more thing - all the images "appear" on Macromedia Dreamweaver (HTML pages) so it's really working but why iOS simulator cannot detect all of the images?

robbieduncan
Aug 22, 2012, 05:54 AM
Show us a directory tree (real, not a made up example). Show us the code (same: not abc.png unless that is the real actual problem image).

jcdb83
Aug 22, 2012, 06:02 AM
Show us a directory tree (real, not a made up example). Show us the code (same: not abc.png unless that is the real actual problem image).

I post on another thread.

jcdb83
Aug 22, 2012, 09:02 PM
Show us a directory tree (real, not a made up example). Show us the code (same: not abc.png unless that is the real actual problem image).

Directory Tree:
1. RentCar Folder (Parent Root)
Child Root of RentCar Folder:
a. build folder
b. Classes folder
c. RentCar.xcodeproj
d. Resources
e. www folder
f. ._.DS_Store
g. .build
h. .gitignore
i. main.m
j. PhoneGap
k. PhoneGapBuildSettings.xcconfig
l. RentCar-Info
m. RentCar-Preifix

www folder of RentCar
Sub-folder
1. css folder
2. Images folder --> All the images contains over there (There are 601 images)
3. js folder
4. ._. DS_Store
5. index.html
6. mainpage.html
7. phonegap.0.9.5.1.js
8. phonegap.0.9.5.1.min.js

<!-- Event 2012(3) -->
<div data-role="page" id="event_2012_3">
<div data-role="header" data-theme="b">
<a href="#events_2012" data-icon="arrow-l" data-theme="a">Back</a>
<h3>Cooking Demonstration (12th May 2012)</h3>
</div>

<div data-role="fieldcontain" align="center">
<label for="search-basic"><b>Search Company or Person Name:</b></label>
<input type="text" class="loadcooking" value="" name="search" placeholder="Type here">
</div>

<div id="hideall_12may2012">
<div id="2012_12July_swipe_event1">
<div data-role="content">
<img src="Images/CDRSiChuan02_740_600.png">
<p align="center">
<img src="Images/btn1_13.png">
</div>
</div>

<div id="2012_12July_swipe_event2">
<div data-role="content">
<img src="Images/CDRSiChuan04_740_600.png">
<p align="center">
<img src="Images/btn2_13.png">
</div>
</div>

<div id="2012_12July_swipe_event3">
<div data-role="content">
<img src="Images/CDRSiChuan05_740_600.png">
<p align="center">
<img src="Images/btn3_13.png">
</div>
</div>

<div data-role="content" align="center" id="hide12may2012">
<img src="Images/CDRSiChuan02_740_600.png" width="50" height="50" id="event2a_thumbnails">
<img src="Images/CDRSiChuan04_740_600.png" width="50" height="50" id="event2b_thumbnails">
<img src="Images/CDRSiChuan05_740_600.png" width="50" height="50" id="event2c_thumbnails">

<p align="right">
<a href="#events_2012" data-theme="b" data-role="button" data-inline="true" data-transition="slide" id="back_12may2012">
Back</a>
<a href="" data-theme="b" data-role="button" data-inline="true" data-transition="slide" id="refresh_12may2012">
Refresh</a>
</p>
</div>
<!-- page -->

As you see I write the scripting that display the images above.

<img src="Images/CDRSiChuan05_740_600.png" width="50" height="50" id="event2c_thumbnails"> --> Is it correct? This image is under the Images folder but why does it show [?]. Do I need to write www/Images/CDRSiChuan05_740_600.png?

Please advise me. Your help will be appreciated. Thank you!

jcdb83
Aug 24, 2012, 05:00 AM
Directory Tree:
1. RentCar Folder (Parent Root)
Child Root of RentCar Folder:
a. build folder
b. Classes folder
c. RentCar.xcodeproj
d. Resources
e. www folder
f. ._.DS_Store
g. .build
h. .gitignore
i. main.m
j. PhoneGap
k. PhoneGapBuildSettings.xcconfig
l. RentCar-Info
m. RentCar-Preifix

www folder of RentCar
Sub-folder
1. css folder
2. Images folder --> All the images contains over there (There are 601 images)
3. js folder
4. ._. DS_Store
5. index.html
6. mainpage.html
7. phonegap.0.9.5.1.js
8. phonegap.0.9.5.1.min.js

<!-- Event 2012(3) -->
<div data-role="page" id="event_2012_3">
<div data-role="header" data-theme="b">
<a href="#events_2012" data-icon="arrow-l" data-theme="a">Back</a>
<h3>Cooking Demonstration (12th May 2012)</h3>
</div>

<div data-role="fieldcontain" align="center">
<label for="search-basic"><b>Search Company or Person Name:</b></label>
<input type="text" class="loadcooking" value="" name="search" placeholder="Type here">
</div>

<div id="hideall_12may2012">
<div id="2012_12July_swipe_event1">
<div data-role="content">
<img src="Images/CDRSiChuan02_740_600.png">
<p align="center">
<img src="Images/btn1_13.png">
</div>
</div>

<div id="2012_12July_swipe_event2">
<div data-role="content">
<img src="Images/CDRSiChuan04_740_600.png">
<p align="center">
<img src="Images/btn2_13.png">
</div>
</div>

<div id="2012_12July_swipe_event3">
<div data-role="content">
<img src="Images/CDRSiChuan05_740_600.png">
<p align="center">
<img src="Images/btn3_13.png">
</div>
</div>

<div data-role="content" align="center" id="hide12may2012">
<img src="Images/CDRSiChuan02_740_600.png" width="50" height="50" id="event2a_thumbnails">
<img src="Images/CDRSiChuan04_740_600.png" width="50" height="50" id="event2b_thumbnails">
<img src="Images/CDRSiChuan05_740_600.png" width="50" height="50" id="event2c_thumbnails">

<p align="right">
<a href="#events_2012" data-theme="b" data-role="button" data-inline="true" data-transition="slide" id="back_12may2012">
Back</a>
<a href="" data-theme="b" data-role="button" data-inline="true" data-transition="slide" id="refresh_12may2012">
Refresh</a>
</p>
</div>
<!-- page -->

As you see I write the scripting that display the images above.

<img src="Images/CDRSiChuan05_740_600.png" width="50" height="50" id="event2c_thumbnails"> --> Is it correct? This image is under the Images folder but why does it show [?]. Do I need to write www/Images/CDRSiChuan05_740_600.png?

Please advise me. Your help will be appreciated. Thank you!

I have attached the parent directory.