QML Image獲取資源路徑的細節

ML是門至關新的UI描述語言，所以在文檔上總不免有疏漏之處，若是所以產生了bug，則就須要花費大量的時間去排查。

在最近筆者使用QML的過程當中，在Image獲取資源路徑的細節上就出現了這樣的狀況。

Image 是qml中一個很是普通的元素，一般使用方法以下：

Image {  width: 120; height: 120  fillMode: Image.TileHorizontally  smooth: true  source: "qtlogo.png"  }

其中，source指的Image元素獲取資源的url路徑，這個url能夠是本地的絕對路徑或者相對路徑，也能夠是qt資源系統的路徑，甚至是網絡資源的路徑。

正是這個看起來不起眼的路徑，卻會帶來跟預期想以外的結果，而且，僅僅從代碼上來看，沒有半點錯誤的地方。

要了解這種狀況的出現，應該要知道qml的兩種使用方式：

1.暴露QML源碼的使用方法，即不對QML文件進行處理，存放在可執行文件的目錄下，使用QtDeclarative模塊動態載入，通常適合以開源程序;

2.混淆QML源碼的使用方法，即將QML文件加入到qt資源系統，編譯成二進制文件供QtDeclarative模塊使用，這樣的好處，是能夠隱藏代碼，供商業項目使用。

在前種的使用方式中，Image元素對於讀取資源路徑正確無誤，在Mac.OS.X，Ubuntu和windows平臺上表示一致，可是後者，卻出現了不一樣。

假設Image以以下代碼使用:

QML是門至關新的UI描述語言，所以在文檔上總不免有疏漏之處，若是所以產生了bug，則就須要花費大量的時間去排查。

在最近筆者使用QML的過程當中，在Image獲取資源路徑的細節上就出現了這樣的狀況。

Image 是qml中一個很是普通的元素，一般使用方法以下：

property url imageUrl: ""  Image {  width: 120; height: 120  fillMode: Image.TileHorizontally  smooth: true  source: imageUrl == "" : "xx/me/My Data/picture.jpg" ? "resource/qtlogo.png"  }

QML代碼段所在的QML文件和qtlogo都處在qt資源系統中，xx/me/My  Data/picture.jpg則值的是三個系統下實際的絕對路徑,這是很異常的狀況發生了。

在windows下Image的表現很正常，可是在Ubuntu下，卻沒法正常顯示系統路徑中的圖片picure.jpg，一個代碼顯示出不一樣的結果來是至關費解的事,可是事實確很簡單，這個source提供Url的寫法是錯誤的，一個錯誤的代碼天然會出現異常狀況。

當QML處在qt 資源系統中，它獲取圖片的路徑天然也是去qt資源系統中得到了，也就是說上述的兩個路徑變成了qrc:xx/me/My   Data/picture.jpg和qrc:resource/qtlogo.png，前者根本不在資源系統內，天然就不會顯示了。

固然，對這樣的狀況天然有正確的解決辦法，那就是對前者路徑的使用應該使用file:///xx/me/My  Data/picture.jpg，這樣QML纔會正常解析爲本地文件的路徑。

至此，對於Image 資源路徑能夠總結出三個規律：

1.在沒用使用qt資源系統時，Image的路徑能夠是絕對或者相對，並不須要特殊的表示;

2.當使用qt資源系統時，若是要特定知指向本地路徑中的圖片資源，那就要使用file://標示;

3.當獲取網絡圖片資源並使用使用qt資源系統，因爲有http表示存在，QML會天然去除qrc:標示。

其中第三點文中並無說明，可是有興趣的同窗能夠去試試。