QML image loading issue - image

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}

Answer 1

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.