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.

? Offline

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! */
}
} @

? Offline

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"@

? Offline

[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 ?

? Offline

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

? Offline

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.

? Offline

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.

? Offline

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

? Offline

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:).

? Offline

thanks , Volker

? Offline

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"

? Offline

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.