Displaying an image in qml

koahnig

I am trying to display an image in qml.

This snippet is part of a swipeview page:

Rectangle {
                    anchors.top: settingsaccept.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                    width: 100
                    height: 400
                    border.width: 3
                    radius: 10
                    border.color: "black"
                    Image {
                        id: icon1
                        source: "//Icon.png"
                    }
                }

The image is located in a qrc file. The writing above does not give an error message, while others always gave complaints that file is not found.
The rectangle frame is displayed but it is empty.
I am running out of ideas for this.

ODБOï

Hi,
@koahnig said in Displaying an image in qml:

display an image in qml

if the image is directly in your qrc this should be enough

  Image {
            id: icon1
            source: "Icon.png"
        }

why do you use "//" in front ?

if i write like you :

source: "//Icon.png"

QML Image: Impossible to open qrc://image1.png/?: the path is a directory

KroMignon

@koahnig said in Displaying an image in qml:

                Image {
                    id: icon1
                    source: "//Icon.png"
                }

Correct syntax for qrc resources is:

Image {
    source: "qrc:///Icon.png"
}

Or, if you have add a prefix in your qrc, like "/pictures":

Image {
    source: "qrc:///pictures/Icon.png"
}

Be aware, source is case sensitive!

koahnig

@KroMignon said in Displaying an image in qml:

@koahnig said in Displaying an image in qml:
                Image {
                    id: icon1
                    source: "//Icon.png"
                }
Correct syntax for qrc resources is:
Image {
    source: "qrc:///Icon.png"
}
Or, if you have add a prefix in your qrc, like "/pictures":
Image {
    source: "qrc:///pictures/Icon.png"
}
Be aware, source is case sensitive!

That solved my problem.

I had tried no slash, single and arrived at double slash, because the other two did result in an error message that the files have not been found.

At a certain point I had searched Internet and found this tutorial https://youtu.be/8_A9g0ji2lY?t=360 which basically did not finish, so there might be coming some additional clues.

Is there an OS dependency?
I am on win 10. I had looked around for source examples for qml image, but I have not seen the "qrc:" before. Probably looked in wrong places.

Thanks @KroMignon and @LeLev for taking your time to reply.

ODБOï

@koahnig said in Displaying an image in qml:

Is there an OS dependency?

hi, Qts resource system is a platform-independent if this answers

KroMignon

@koahnig said in Displaying an image in qml:

Is there an OS dependency?

Nope, resources are design to be OS independant, for more detail take a look at https://doc.qt.io/qt-5/resources.html

koahnig

@KroMignon said in Displaying an image in qml:

@koahnig said in Displaying an image in qml:

Is there an OS dependency?

Nope, resources are design to be OS independant, for more detail take a look at https://doc.qt.io/qt-5/resources.html

That makes sense if you consider Qt overall it definitely should be. However, if you look at that youtube video, the guy is using linux and no "qrc:"

@LeLev said in Displaying an image in qml:

@koahnig said in Displaying an image in qml:

Is there an OS dependency?

hi, Qts resource system is a platform-independent if this answers

You are correct with the underlying part. IMHO it should be independent as soon as you access files in qrc file. However, as noted above "qrc:" is not mentioned in the video (so far). It works somehow. Possibly an older Qt version ??

J.Hilk

@koahnig
I think this is a bit more complicated or is indeed os specific.

I have the following model for a grid view:

model: ["/Icon1.png", "Icon2.png", "qrc:/Icon3.png"]

and all 3 Icons are displayed correctly, this is on macOS

koahnig

@J.Hilk said in Displaying an image in qml:

@koahnig
I think this is a bit more complicated or is indeed os specific.

I have the following model for a grid view:
model: ["/Icon1.png", "Icon2.png", "qrc:/Icon3.png"]
and all 3 Icons are displayed correctly, this is on macOS

Basically I expected to require a special notation for file in qrc. That was exactly the reason to start looking around. All I found did slashes and possibly additional folders, but I did not stumble over the prefix "qrc:". I had checked the ":" as prefix, since I used it C++. However, qml there was no success.

The examples in here show https://doc.qt.io/qt-5/resources.html provide only examples not compatible to what I try to do.
When you know what you need to look for, there is a reference to something with url stating that the "qrc:///..." notation.

Even the qml example https://doc.qt.io/qt-5/qtquick-imageelements-example.html does not state boldly that there could be a prefix required nor does it show it somewhere. Just checked the example's source.

KroMignon

@koahnig said in Displaying an image in qml:

You are correct with the underlying part. IMHO it should be independent as soon as you access files in qrc file. However, as noted above "qrc:" is not mentioned in the video (so far). It works somehow. Possibly an older Qt version ??

The qrc:/// notation is the recommanded way from Qt, other can work, but are not recommanded.

I've used qrc:/// in all my project (Linux/Windows/Android), for different kind of resources (QML, SVG, PGN, etc.) and it always works.

koahnig

I have filed a bug report on jira https://bugreports.qt.io/browse/QTBUG-74573