Important: Please read the Qt Code of Conduct -

How to display IMG(.jpg/.png) file at child window??

  • Hello, i'm new to Qt and Qt quick, so i want to ask my problem here.

    as i mentioned, i want to know how to display IMG file at child window.

    i will show you the problem part of codes i thought


    import QtQuick 2.7
    import QtQuick.Controls 1.3
    import QtQuick.Controls.Material 2.1
    import QtQuick.Dialogs 1.2
    import QtQuick.Layouts 1.1
    import QtQuick.Window 2.1

    Window {
    id: mainWindow
    visible: true
    width: 1920
    height: 1080
    color: "#ffffff"
    title: qsTr("Test Frame")
    property variant win;
    Material.theme: Material.Dark
    Material.accent: Material.DeepOrange

    FileDialog {
        id: openDialog
        folder: "file://Users/Shin jongwoo/Desktop"
        nameFilters: ["Image files (*.png *.jpg)", "All files (*)"]
        selectedNameFilter: "All files (*)"
        onAccepted: {
             var Component = Qt.createComponent("SecondWindow.qml");
             win = Component.createObject(mainWindow);


    import QtQuick 2.4
    import QtQuick.Controls 2.1
    import QtQuick.Controls.Material 2.1
    import QtQuick.Layouts 1.1
    import QtQuick.Window 2.0
    import QtQuick.Dialogs 1.2

    id: subwindow
    width: 900
    height: 900

    Rectangle {
        id: rectangle2
        x: 0
        y: 0
        width: 900
        height: 900
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        clip: false
        gradient: Gradient {
            GradientStop {
                position: 0
                color: "#ffffff"


    Image {
    id: image
    x: 47
    y: 693
    width: 256
    height: 182
    source: "qrc:/qtquickplugin/images/template_image.png"


    Please tell me, how can i change above codes
    i want to display some images at second window when the second one is opened
    i mean, after child window opened, there should be images also.


  • @Aleph Are you looking for something like this, the images what you select through FileDialog is intended to be shown in the second window?

  • @Yashpal Thanks for replying! yes, that is exactly what i am looking for. do you know how to?
    or tell me where i can see the way :)

  • @Aleph Something like this.

    In main.qml
     FileDialog {
            id: fileDialog
            title: "Please choose a file"
            folder: shortcuts.home
            nameFilters: ["Image files (*.png *.jpg)", "All files (*)"]
            selectedNameFilter: "All files (*)"
            onAccepted: {
                var compo = Qt.createComponent("SecondWindow.qml");
                if(Component.status === compo.ready)
                    var win = compo.createObject(mainWindow,{"imgPath": fileDialog.fileUrl})
            onRejected: {
            Component.onCompleted: visible = true
    import QtQuick 2.0
    Item {
        property string imgPath
            source: parent.imgPath

  • @Yashpal Thanks! i appreciate you to give me some examples
    i tried that code, but there is still problem sadly.

    fist of all, when i choose a image file
    "Unable to assign [undefined] to QUrl" this error is checked

    Also, i have buttons for opening and closing dialog at main.qml
    what it means, there no need to open dialog automatically when i run the program.

    it's pretty difficult to me : (
    but Thanks again!

  • @Aleph
    "Unable to assign [undefined] to QUrl" That's strange!! At what line do you see this problem?

    And, if you do not wish to open FileDialog automatically when you run the program ,then just set the visible property of FileDialog to false(infact, by default the value is false). Later if you want to open FileDialog, then set visible to true or call open().

    Also, have a look at the documentation of FileDialog

  • @Yashpal
    the error was checked from image {} at SecondWindow.qml
    i always read documents as a reference :)

    also, making this program with "C++ code" through integrating both is
    one of consideration.
    So if you have any idea about this, please tell me

    Thanks a lot!

  • @Aleph Hope the problem is resolved for you. Extending QML with C++ is a good option. You can use QQuickImageProvider Class as well.

Log in to reply