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

leon.anavi

Please read the following "thread":http://developer.qt.nokia.com/forums/viewthread/5617 because I believe it discuss the same issue.

spode

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

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

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.