How to set the the path of images in qml file if the qml file is in resource ?

[spode]

hi. in qml you can display images with relative path so.

X = image.png (or other extention)
let's see this example:

1. our .qml is in C:\user\nomeutente\progetto\cartellaprogetto\qml\main.qml .
   our X is in C:\user\nomeutente\progetto\cartellaprogetto\image\image.png
   here you write in main.qml
   @ //main.qml
   import QtQuick 1.0
   Rectangle {
   width: 100; height: 100

Image {
source: "../image/image.png" /*where "../" indicates that the last part of the current directory is trunced, so we have C:\user\nomeutente\progetto\cartellaprogetto and then we append /image/image.png, so the absolute path is C:\user\nomeutente\progetto\cartellaprogetto/image/image.png. note that you must use "/" as separator! */
}
} @

[eirnanG]

i use this if its GIF
@AnimatedImage { id: bath; x: 0; y: 0;
width: 240; height: 316; source: "bath"}@

and for PNG or JPEG

@ Image {
id: image1
x: 52
y: 56
width: 100
height: 100
source: "Status.JPG"@

[brucewuu]

[EDIT: moved this post here from another thread, Volker]

sorry , I am afraid you guys misunderstand this question , if qml files is not embeded in the qrc files ,
there is no problem referring the qml files and images file with relative or absolute path , but if we embeded the qml files into the qrc files , while the images files is not embeded in the qrc files , like
qml refering using "qrc:/qml/myqml.qml" , images using "images/hello.png", and images folder is under exe folder , it can't find the image files .why I want to do it in this way , because I want to hide the qml files when I release my software , while I exposed the images files , because I want to provide skin options , customers can download new images from our website and replace the old image files , how can I solve this problem ?

[brucewuu]

but if we embeded the qml files into the qrc files , while the images files is not embeded in the qrc files , like
qml refering using “qrc:/qml/myqml.qml” , images using “images/hello.png”, and images folder is under exe folder , it can’t find the image files .why I want to do it in this way , because I want to hide the qml files when I release my software , while I exposed the images files , because I want to provide skin options , customers can download new images from our website and replace the old image files , how can I solve this problem ?

[DenisKormalev]

You always can pass absolute path of your app folder (which you can retrieve in run-time) as context property to qml and concat it with your image path

[goetz]

If do not use an absolute path, Qt makes it relative to the surrounding QML code. And as this is in a resource, it searches for the image in the resources too.

[brucewuu]

thanks , Denis and Volker , you are right , now I can solve this with Denis's suggestion , thanks all of you guys .

[DenisKormalev]

Volker, OP asks about using non-resourced images in resourced qml. I'm not sure it is possible with relative paths.

[brucewuu]

agree with denis , maybe there is some function which can set the path of the images files , or some
protocol , like "relative:///"

[goetz]

Relative paths rely on the "parent" path to be resolved. Basically it's an URL. You cannot use relative paths and switch the protocol (from qrc: to file:).

[brucewuu]

thanks , Volker

[jkosonen]

Did you get this to work, for me it just says "QML Image: Protocol "C" is unknown"

But it works with:

source: "file:images/image.jpg"

[brucewuu]

yes , now it works , you can use
@
QString imagePath = QDir::currentPath()+"/images/";
#if defined(Q_OS_MAC)
imagePath = "file://"+imagePath;
#endif
QDeclarativeContext::setContextProperty("imagePath",imagePath);
@

[misterion]

Also you can build this and use imagePath hack in Qt Creator and QmlViewer - https://github.com/misterion/QmlViewerDevHelper

[TonyN]

@leon.anavi the link is no longer valid!

[Raman]

This is really informative.