QML Image获取资源路径的细节_qml image.data-优快云博客

QML是门相当新的UI描述语言，因此在文档上总难免有疏漏之处，如果因此产生了bug，则就需要花费大量的时间去排查。
在最近笔者使用QML的过程中，在Image获取资源路径的细节上就出现了这样的情况。
Image 是qml中一个非常普通的元素，通常使用方法如下：

1

2

3

4

5

6

 
        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中一个非常普通的元素，通常使用方法如下：

1

2

3

4

5

6

7

 
        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:标示。
其中第三点文中并没有说明，但是有兴趣的同学可以去试试。