SOUI的初學者剛開始可能難以搞清楚在SOUI中顯示一個圖片資源的流程，這里做一個簡單的示范。
首先我們准備好一張圖，以下圖為例。
第一步，我們首先把這個圖片文件復制到demo的uires目錄下，新建一個目錄jpg,下面只有這一個文件9.jpg
第二步，我們需要在uires.idx中引入該圖片資源
<jpg> <file name="girl" path="jpg\9.jpg"/> </jpg>
我們給這個資源命名為"girl"。
第三步，我們在全局或者窗口局部的skin結點中定義一個imgframe對象。這里定義在主窗口的局部skin中。
<skin> <!--局部skin對象--> <gif name="gif_horse" src="gif:gif_horse"/> <gif name="gif_penguin" src="gif:gif_penguin"/> <imgframe name="skin_girl" src="jpg:girl" margin-x="150" margin-y="150"/> </skin>
注意上面代碼中對girl的引用，我們保留x及y方向各150個點不拉伸。
第四步，在UI中定義一個img控件對象來顯示該圖片。
<page title="jpg:girl"> <img pos="0,0,-0,-0" skin="skin_girl"/> </page>
大功告成！
我們運行一下程序看看效果。
下面是縮小狀態：
可以看到邊緣的點和中間的點拉伸不一樣。
再看看放大一點的狀態：
這樣效果看上去好些了。
全部工作就是修改XML文件，不需要涉及一行C++代碼，即可完成一個圖片的顯示。
從文件中加載圖片基本類似，可以參考demo中從文件中加載GIF動畫的例子。
