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

[Aleph]

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

@main.qml

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);
         win.show();
    }
}

@SecondWindow.qml

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

Window{
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.

thanks

[Yashpal]

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

[Aleph]

@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 :)

[Yashpal]

@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: {
            console.log("Canceled")
            Qt.quit()
        }
        Component.onCompleted: visible = true
    }

SecondWindow.qml

import QtQuick 2.0

Item {

    property string imgPath
    Image{
        source: parent.imgPath
    }

}

[Aleph]

@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!

[Yashpal]

@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

[Aleph]

@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!

[Yashpal]

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