Complete noob to QML, why can't I load any images?
-
I've been programming with Qt professionally for over 2 years on the C++ side. Todya I'm trying to learn QML - it's not going well. I'm trying to follow this guide https://qmlbook.github.io/ch01-meetqt/meetqt.html
The first problem, I can't figure out how to get the images to load without using the absolute path to the image.
source: "file:/abosolute/path/to/image.png"I've been searching the internet for an hour, apparently you can add resources in a way that allows this to be easier and match the example of just "image/background.png" but I can't find how to do this.
I can add resources to the project by right clicking on resources and selecting "Add existing files" and go select the images, and they then show up in the side bar in QtCreator. But they still can't be found.
What am I doing wrong? How do you add images, or for that matter, any resources to a project such that qml can use them?
This is soooo much easier on the C++ side, I'm quite confused.
-
Resources can be retrieved with
qrcschema:source: "qrc:///images/image.jpg" -
Nope, still didn't work.
qrc:/main.qml:19:5: QML Image: Cannot open: qrc:///images/background.pngWhat is the entire process to do this correctly? Have I added them correctly if I can see on the left side bar Resources > qml.qrc > / > images > background.png?
-
Step one: add resource file, lets say 'images.res'.
Step two: add a prefix path to resource file, lets say '/images'.
Step three: add an image to a '/images' prefix, lets say 'background.png', in project tree it will loooks like 'Resources > images.qrc > /images > background.png'.
Step four: set source to yourImageas "qrc:///images/background.png". -
I've been programming with Qt professionally for over 2 years on the C++ side. Todya I'm trying to learn QML - it's not going well. I'm trying to follow this guide https://qmlbook.github.io/ch01-meetqt/meetqt.html
The first problem, I can't figure out how to get the images to load without using the absolute path to the image.
source: "file:/abosolute/path/to/image.png"I've been searching the internet for an hour, apparently you can add resources in a way that allows this to be easier and match the example of just "image/background.png" but I can't find how to do this.
I can add resources to the project by right clicking on resources and selecting "Add existing files" and go select the images, and they then show up in the side bar in QtCreator. But they still can't be found.
What am I doing wrong? How do you add images, or for that matter, any resources to a project such that qml can use them?
This is soooo much easier on the C++ side, I'm quite confused.
Hi @bmarzolf,
step 1: make one directory called images in your project directory,
now your project directory should have images folder yourProjectDir/images
step 2: copy all your images into images folder yourProjectDir/images/your_images.png
step 3: On qt creator, right click on qml.qrc->Add existing files->go your project directory/images and add your_images.png and click open.
step 4: Now in Image type,Image { source:"images/your_images.png" }Thats it. Let me know your result.
Happy coding. -
Hi @bmarzolf,
step 1: make one directory called images in your project directory,
now your project directory should have images folder yourProjectDir/images
step 2: copy all your images into images folder yourProjectDir/images/your_images.png
step 3: On qt creator, right click on qml.qrc->Add existing files->go your project directory/images and add your_images.png and click open.
step 4: Now in Image type,Image { source:"images/your_images.png" }Thats it. Let me know your result.
Happy coding. -
Hi @bmarzolf,
step 1: make one directory called images in your project directory,
now your project directory should have images folder yourProjectDir/images
step 2: copy all your images into images folder yourProjectDir/images/your_images.png
step 3: On qt creator, right click on qml.qrc->Add existing files->go your project directory/images and add your_images.png and click open.
step 4: Now in Image type,Image { source:"images/your_images.png" }Thats it. Let me know your result.
Happy coding.This post is deleted!
