QML Image擷取圖片資源路徑的細節，

QML Image擷取圖片資源路徑的細節，

近期重新開始Qt5，在學到QML擷取本地圖片資源時總是遇到類似 “ QML Image: Cannot open: qrc:///images/Blue hills.jpg ”的錯誤，即無法正常載入本地的圖片資源，經過一般努力，終於搞定拉！特此記錄下來，方便自己和各位同仁查詢！

參考：http://mobile.51cto.com/symbian-261878.htm

 

一開始遇到問題的時候在網上搜尋了些久都沒成功解決問題，不過倒是有些啟發，比如在上面網址看到的資料中就多少有些體會。

在這裡先貼出本人的小例子：

Rectangle {

    id: rec

    width: 800

    height: 600

    opacity: 1

    Image {

        id: image1

        source: "images/Blue hills.jpg"

        Image {

            id: image2

            width: 256

            height: 256

            source: "images/cute_colorful_qq_01.png"

        }

    }

}

若正常顯示的話，會出現以下的效果：

但是本人一開始測試的時候，程式啟動並執行效果都是一片空白，而且還總是出現 “ QML Image: Cannot open: qrc:///images/Blue hills.jpg ” 的錯誤，雖然程式可以正常運行！

 

一開始本人還以為是路徑的問題，根據網上的很多資料頁時這麼說的，後來ijiu不斷的修改路徑參數，唉！不管俺怎麼修改都不能把圖片顯示出來，後來懷疑是Qt的Bug，但是本人有測試了一下載入遠端的圖片，即網路上的圖片，如一下代碼：

    width: 800

    height: 600

    opacity: 1

    Image {

        id: image1

        source: "http://192.168.13.219/images/Blue hills.jpg"

    }

}

以上 source 後面的網址是本人在自己的電腦上面搭載的伺服器的路徑下的圖片，讀者也可以自己連結到網路上的其他圖片連結！這樣都可以正常顯示呀，如：

 

由此看來不是Qt的問題，那就是俺自個的問題咯，再繼續摸索！

這裡注意一下，以下是俺的工程路徑，圖片資源也在這個路徑下面：

 

後來俺猜想，會不會是“ qml.qrc ”這個資源檔出問題了呢，把它開啟一看：內容如下：

<RCC>    <qresource prefix="/">        <file>main.qml</file>    </qresource></RCC>

嗯，好像真的有點問題，因為按照常規，*.qrc這個資源檔是有記錄圖片資源的路徑資訊的，但這裡沒有，於是本人自己手動修改為以下這樣：

<RCC>    <qresource prefix="/">        <file>main.qml</file>        <file>images/Blue hills.jpg</file>        <file>images/cute_colorful_qq_01.png</file>        <file>images/Sunset.jpg</file>    </qresource></RCC>

然後重新編譯運行，這是令人激動的時刻到來啦，終於成功顯示了我們的圖片啦！哈哈！

 

這裡提醒一下，我們其實也可以不用自己手動更改 *.qrc 檔案，直接在 QtCreator 的項目工程裡面把圖片資源載入進去就行拉！如所示：

 

大家看到了嗎，就是上面紅色方框圈出來的幾張圖片，需要自己手動把它們添加到工程中去，這樣就會自動修改 “*.qrc”檔案，一開始是沒有的哦！問題就出現在這裡！

 

好啦！就先到此啦！