QML Image obtains details about the resource path

QML is a quite new UI description language, so there are always omissions in the document. If a bug occurs, it takes a lot of time to troubleshoot.

In the recent use of QML, this problem occurs in the details of obtaining the resource path from the Image.

Image is a very common element in qml. It is usually used as follows:

 
 

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

Here, source refers to the url path of the Image Element to obtain the resource. This url can be an absolute or relative local path, or a path of the qt resource system, or even the path of network resources.

It is this seemingly inconspicuous path that will bring results out of expectation. In addition, from the code perspective, there are no errors.

To understand this situation, you should know the two qml usage methods:

1. Expose the use of the QML source code, that is, do not process the QML file, store it in the directory of the executable file, and use the QtDeclarative module for dynamic loading, which is generally suitable for open-source programs;

2. obfuscation of the QML source code is used to add the QML file to the qt Resource System and compile it into a binary file for the QtDeclarative module. This advantage is that the code can be hidden for commercial projects.

In the previous usage method, the Image element is correct for reading the resource path. It is consistent on Mac. OS. X, Ubuntu, and windows platforms, but the latter is different.

Assume that the Image is used in the following code:

QML is a quite new UI description language, so there are always omissions in the document. If a bug occurs, it takes a lot of time to troubleshoot.

In the recent use of QML, this problem occurs in the details of obtaining the resource path from the Image.

Image is a very common element in qml. It is usually used as follows:

 
 

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

The QML file and qtlogo of the qml code segment are both in the qt Resource System. The values of xx/me/My Data/picture.jpg are the actual absolute paths in the three systems, this is an exception.

In Windows, the image function is normal, but in Ubuntu, the image picure.jpg in the system cannot be normally displayed. It is rather confusing to display different results in one code, but the fact is very simple. The Url provided by this source is incorrect, an error code will naturally cause exceptions.

When QML is in the qt Resource System, the path for obtaining images is naturally obtained from the qt resource system. That is to say, the above two paths are changed to qrc: xx/me/My Data/picture.jpg and qrc: resource/qtlogo.png are not displayed in the resource system.

Of course, there is a correct solution to this situation, that is, file: // xx/me/My Data/picture.jpg should be used for the former path, in this way, QML is resolved to the path of the local file.

At this point, three rules can be summarized for the Image resource path:

1. When the qt resource system is not used, the Image path can be absolute or relative without special representation;

2. When using the qt resource system, if you want to point specific information to the image resources in the local path, you need to use file;

3. When obtaining network image resources and using the qt Resource System, QML naturally removes the qrc: flag because of http representation.

The third point is not described in this article, but you can try it if you are interested.