JQuery Mobile (PhoneGap) - Images [?] Not Loading - Mobile Development

I am currently using jQuery Mobile (PhoneGap) - HTML5 + CSS5 + Javascript that supports Xcode. I will explain below.

First scenario:
I use web app to test on my iPad (e.g. http://192.168.1.100/cdg/index.html) and all of the images work.

Second scenario:
I put all of my files into Xcode where it supports PhoneGap. When I click Xcode and run it using iOS Simulator but some of the images does not appear on iOS Simulator - I have attached 3 screenshots image below.

Do you know where the problem lies with?

I need all the images working finely on iOS Simulator before I can deploy it to iTunes store. I know the image format must be in PNG but can it work with JPG? Just wondering.

By the way, I have attached the parent directory. The image may look like Windows because I am not using mac os now but the concept is about the same.

<!-- 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. I believe it should be correct since web app works finely.

<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. Thanks.