Load images from folder to exact coordinates - qt

Question

I have images, which names are the X and Y coordinates (i.e. "100_100.jpg", "200_100.jpg", "100_200.jpg", "200_200.jpg") in one folder ("img"). All images have the same width and height.
So the question is: How I can load the images automatically to coordinates that they have in their names without creating thousand lines of repeating code? (I will have much more than only those 4 images to load so the automation is a must)
Code:
main.qml:
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 1000
height: 800
visible: true
title: qsTr("Tiled Photos")
Rectangle {
id: rectangle
anchors.fill: parent
anchors.margins: 20
color: "#cdecf9"
// THIS PART I WANT TO BE AUTOMATED:
Image {
id: img_100_100
width: 100
height: 100
source: "img/100_100.png"
asynchronous: true
x: 100
y: 100
}
Image {
id: img_100_200
width: 100
height: 100
source: "img/100_200.png"
asynchronous: true
x: 100
y: 200
}
Image {
id: img_200_100
width: 100
height: 100
source: "img/200_100.png"
asynchronous: true
x: 200
y: 100
}
Image {
id: img_200_200
width: 100
height: 100
source: "img/200_200.png"
asynchronous: true
x: 200
y: 200
}
// END
}
}

Answer 1

Your question doesn't mention how the app knows what files there are. Maybe it's supposed to search a directory for these files, or maybe they're just a hardcoded list, etc. So let's assume you have a list of filenames that comes from...somewhere.
property var filenames: [
"100_100.png",
"100_200.png",
"200_100.png",
"200_200.png"
]
This is going to be the model for our Repeater. For readability, let's add a function that takes one of those filenames and extracts the x and y coordinates from it:
function getXY(filename) {
// First chop off the extension by looking for the '.'
var noExt = filename.split('.');
// Then split the string up by the '_' character
return noExt[0].split('_');
}
And finally, this is how we use it.
Repeater {
model: filenames
Image {
width: 100
height: 100
asynchronous: true
// Use the filename from the model
source: "img/" + modelData
// Store the result of our function call to get coordinates
property var coordinates: getXY(modelData)
x: coordinates[0]
y: coordinates[1]
}
}