QML image loading issue

Question

I can load an image stored in qrc resource at start up just fine but when I try to load the very same image (for demo purposes only), I get a 'QML Image: Cannot open: qrc:../....' error.
Clicking on the image repeatedly will even give the same error to the same PNG file that was loaded at startup (with no error). It's as if the paths change once the program is up and running.
Essentially, neither 'gray_button1.png' nor 'gray_button2.png' can be opened for reasons unknown once the program is running...
One other fact:the QML file running this script itself is stored/located in the QML.qrc file.

import QtQuick 2.7

Rectangle {
    id: baseBtn
    color: "transparent"

    property string activeSource:"qrc:../Root/Images/gray_button1.png";
    property string inactiveSource:"qrc:../Root/Images/gray_button2.png";
    property string previousText:""
    property bool active:false

    onActiveChanged:{
        if (active)
            btnImage.source = activeSource;
        else    
            btnImage.source = inactiveSource;
    }

    MouseArea{
        id: mouseArea1
        anchors.fill:parent
        onClicked: {
        active = !active;
        }

        Image {
            id: btnImage
            width:parent.width
            height: parent.height
            anchors.horizontalCenter: parent.horizontalCenter
            source:"qrc:../Root/Images/gray_button2.png"; //opens and loads fine at start up -> appears normal
            z:0
        }
    }
}

Here is the file structure

Application
-->Root
---->Images
       gray_button1.png
       gray_button2.png
-->QML 
    qml.qrc
    button.qml
    ...{*.qml}

As I know qrc path is :/prefix/file. What does .. mean in your case? Please provide the folder structure. — folibis
Why would the folder structure matter? If the file can be found on the first pass when starting up, why couldn't it find it during runtime? — Gio

Robin Burchell Robin Burchell · Accepted Answer · 2017-01-11T21:08:20

Without being able to see your full project (including the qrc XML, for instance), it's a bit difficult to be able to suggest something concrete – I can't recall a problem like this one — but I'll try.

Unfortunately, Image is a little shy when it comes to reporting what exactly went wrong. I have a fix pending for this, but it probably won't be available until Qt 5.9 (though if you have your own Qt build, feel free to try it out, it might help you!)

If you aren't able to do that, I'd suggest trying to read the paths you're passing to Image using QImageReader (in C++), and making sure that what you are reading makes sense. You should be able to more easily access an error message there through printing the errorString() of the file, something like so:

QImageReader reader("qrc:/Root/Images/gray_button2.png");
QImage img = reader.read();
if (img.isNull()) {
    qWarning() << "Something is wrong:" << reader.errorString();
}

If you find no problem that way, then I'd suggest simplifying the existing code you have, for instance, using absolute rather than relative paths, like qrc:/Root/Images/Whatever.png, taking the qrc out of the equation altogether, and continuing that way, cutting one piece after another out of this until you reach something that makes sense (and works, ideally reveals the culprit).

For what it's worth, I can't reproduce the problem you mention with the example QML you're showing here.

QML image loading issue

1 Answers