JQuery Mobile是基于JQuery框架的一個移動端UI庫，它提供了許多易于使用的界面組件和特效。其中，圖片的展示也是非常重要的一部分。在這篇文章中，我們將介紹如何在JQuery Mobile中展示圖片。

要在JQuery Mobile中展示圖片，我們需要使用img元素，如下所示：

<img src="image.jpg">

這里的src屬性指定了圖片的地址。在JQuery Mobile中，為了適應不同大小的屏幕，我們需要使用響應式圖片。響應式圖片是能夠根據屏幕大小自動調整大小的圖片。我們可以使用以下代碼來實現：

<img srcset="
image_small.jpg 320w,
image_medium.jpg 640w,
image_large.jpg 1024w"
sizes="(max-width: 320px) 280px,
(max-width: 640px) 600px,
1000px"
src="image_medium.jpg">

在這段代碼中，我們使用了srcset屬性來指定不同大小的圖片。其中，320w表示320像素寬度的圖片，640w表示640像素寬度的圖片，1024w表示1024像素寬度的圖片。sizes屬性指定了圖片的寬度范圍和大小。max-width: 320px表示屏幕最大寬度是320像素，最大顯示圖片的寬度是280像素；max-width: 640px表示屏幕最大寬度是640像素，最大顯示圖片的寬度是600像素；1000px表示屏幕寬度大于640像素時顯示1000像素寬度的圖片。最后的src屬性指定了默認顯示的圖片，如果屏幕寬度小于320像素，則顯示image_small.jpg；如果屏幕寬度在320像素和640像素之間，則顯示image_medium.jpg；如果屏幕寬度大于640像素，則顯示image_large.jpg。

除了這種響應式圖片的方式，我們還可以使用JQuery Mobile提供的Grid布局來展示多張圖片。Grid是一個二維的網格系統，可以將頁面分割成若干個等寬的列。我們可以使用以下代碼來實現：

<div class="ui-grid-b">
<div class="ui-block-a"><img src="image1.jpg"></div>
<div class="ui-block-b"><img src="image2.jpg"></div>
<div class="ui-block-c"><img src="image3.jpg"></div>
<div class="ui-block-a"><img src="image4.jpg"></div>
<div class="ui-block-b"><img src="image5.jpg"></div>
<div class="ui-block-c"><img src="image6.jpg"></div>
</div>

在這段代碼中，我們設置了一個3列的網格布局，每一列的寬度相等。ui-block-a、ui-block-b和ui-block-c是表示每一列的類名。每一個div元素中包含了一個img標簽，用于指定圖片的地址。這樣就可以在JQuery Mobile中展示多張圖片了。