iOS PhoneGap (iOS Simulator) - Unable to display/load images [?]

jcdb83

macrumors newbie
Original poster
Aug 21, 2012
6
0
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.

Code:
<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.
 

Attachments

Last edited:

Duncan C

macrumors 6502a
Jan 21, 2008
853
0
Northern Virginia
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.

Code:
<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.)
 

jcdb83

macrumors newbie
Original poster
Aug 21, 2012
6
0
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?
 

jcdb83

macrumors newbie
Original poster
Aug 21, 2012
6
0
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

Moderator emeritus
Jul 24, 2002
24,638
61
Harrogate
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

macrumors newbie
Original poster
Aug 21, 2012
6
0
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

Code:
<!-- 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

macrumors newbie
Original poster
Aug 21, 2012
6
0
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

Code:
<!-- 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.
 

Attachments