24

This seems really basic but for some reason I can't get the image source to work in the ultra-simple QML app below.

FYI, I'm running Mac OS-X 10.9.5, Qt Creator 3.2.1 based on Qt 5.3.2. 

import QtQuick 2.3
import QtQuick.Controls 1.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Test")

    Image {
        id: image1
        x: 10
        y: 10
        width: 100
        height: 100
        source: "testImage.png"
    }
}

I get the following error:

qrc:/main.qml:10:5: QML Image: Cannot open: qrc:/testImage.png

The application window is created but no image is displayed. I've also tried wrapping the image within a Rectangle but this doesn't help.

What am I doing wrong here?

The "testImage.png" is in the project directory and I've tried all sorts of ways to specify the image path using resources, absolute, relative, and even specifying the image source manually with the QML UI designer.

I'll also mention that to get Qt 5.3.2 to work I followed the modification suggested HERE.

Thanks.

Community
  • 1
  • 1
Bruce Dean
  • 2,798
  • 2
  • 18
  • 30
  • 1
    https://doc.qt.io/qt-5/qml-qtquick-image.html#source-prop `The URL may be absolute, or relative to the URL of the component.` qrc URLs are relative. You can also use file:///home/user/testImage.png , or you can define your own [QQuickImageProvider](https://doc.qt.io/qt-5/qquickimageprovider.html) that can handle your own scheme, e.g. `Image { source: "image://myimageprovider/testImage.png" }` – Alex Bitek Apr 21 '17 at 12:38

6 Answers6

34

I suppose that your qml file is in resources, so try place your testImage.png image in resources too. Recompile app, run it and check is image works properly.

All should be together. For example:

enter image description here

My code:

Image
{
    source: "images/earth.png"

If I delete this image from resources, I'll get this error too, but image still in the correct place in file system.

When qml source placed in the resource, then all files, which loads from qml should be in resource too (Qt searchs this files in the resources, not in the file system).

Jablonski
  • 18,083
  • 2
  • 46
  • 47
  • 1
    Awesome, that worked! Seems like I've done this a million times before but didn't recall needing to add to resources. Thanks! – Bruce Dean Sep 30 '14 at 17:09
  • 3
    It also works if you put the image in qrc resource file and access it as follows: Image { source: "qrc:/images/earth.png" } – SGrebenkin Oct 03 '14 at 06:25
  • 1
    Where is the DATA itself? I see an "alias" functionnality, meaning the file can be `/home/me/image.jpg` but the name in qrc be `qrc:/images/my_image.jpg`. Do I need to copy the data elsewhere? – Sandburg Aug 24 '18 at 10:00
  • "When qml source placed in the resource, then all files, which loads from qml should be in resource too" This is not correct and not very useful either. Sometimes you need to load an external image. For example if user selects an image to be displayed somewhere in the app. – pooya13 May 28 '21 at 05:20
8

If you are locating from local filesystem , get the file path and prefix "file:" as source = "file:/root/Desktop/Rathod.png"

eyllanesc
  • 235,170
  • 19
  • 170
  • 241
user11311318
  • 81
  • 1
  • 1
3

If you are using qrc, make sure the image is added to your project. Just having it in your source directory may not be enough. For example, my main.qml is located in a particular directory. I move my .png into the same directory. I then "Add Existing Files.." and add the .png to the project. My image has the following

source:"qrc:<same dir as main.qml>/image.png"
eyllanesc
  • 235,170
  • 19
  • 170
  • 241
Richard Jessop
  • 897
  • 1
  • 12
  • 19
1

I had a similiar problem and solved it the following way:

  1. Right click on your qml.qrc, then choose "open with" -> "Resource Editor"
  2. Once you are in the Resource Editor click on "Add missing file", there choose your image
  3. Lastly open your qml file in the Design editor and click on the Image element, on the right side choose the path to the image
Kev1n91
  • 3,553
  • 8
  • 46
  • 96
0

There can be two problems:

  1. The image is corrupt, although the image was correctly displayed in all previews IconImage refuses to load it. Try to use another image that is known as work correctly It seems that the Qt Image loader is very sensitive to the image format.
  2. There is a resource cache problem. Try to delete qml_qmlcachea.qrc in your compiling folder and try it again
Alfredo cubitos
  • 161
  • 2
  • 5
0

Try to close Shadow Build under Projects->Build Settings.

rkilic
  • 1