In this PyQt5 QtQuick article iam going to show you Loading Image In Window. So before this we had some articles about QtQuick And QML, so you can check them from the below link.
QML Previous Articles
QML Applications?
QML is a declarative language that allows user interfaces to be described in terms of their visual components and how they interact and relate with one another. It is a highly readable language that was designed to enable components to be interconnected in a dynamic manner, and it allows components to be easily reused and customized within a user interface. Using the QtQuick module, designers and developers can easily build fluid animated user interfaces in QML, and have the option of connecting these user interfaces to any back-end C++ libraries.
What Is QML?
QML is a user interface specification and programming language. It allows developers and designers alike to create highly performance, fluidly animated and visually appealing applications. QML offers a highly readable, declarative, JSON-like syntax with support for imperative JavaScript expressions combined with dynamic property bindings.
So First of all this is the main.qml file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import QtQuick.Window 2.2 import QtQuick 2.3 Window { visible:true width:600 height:400 color:"yellow" title: "Codeloop.org - PyQt5 QML Window" Rectangle { id:blueRect color:"blue" width:450 height:64 //x:80 //y:80 anchors.centerIn:parent border.color:"black" border.width:6 radius:15 } Text { id:text1 text:"Hello QtQuick Application" font.pixelSize:30 font.bold:true color:"white" anchors.centerIn:parent } Image { id:image source:"codeloop.png" sourceSize.width:parent.width/2 sourceSize.height:parent.height/2 } } |
This is our main window and rectangle.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
Window { visible:true width:600 height:400 color:"yellow" title: "Codeloop.org - PyQt5 QML Window" Rectangle { id:blueRect color:"blue" width:450 height:64 //x:80 //y:80 anchors.centerIn:parent border.color:"black" border.width:6 radius:15 } |
Also in here we are going to create a text in the window , for more information about text creation in QML you can check my previous article.
|
1 2 3 4 5 6 7 8 9 10 |
Text { id:text1 text:"Welcome to codeloop.org" font.pixelSize:30 font.bold:true color:"white" anchors.centerIn:parent } |
And now this is the code that we are going to load our image. make sure that you have an image in your working directory.
|
1 2 3 4 5 6 7 8 9 10 |
Image { id:image source:"codeloop.png" sourceSize.width:parent.width/2 sourceSize.height:parent.height/2 } |
And this is our main.py for loading the QML file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
# Import necessary modules from PyQt5 from PyQt5.QtQml import QQmlApplicationEngine from PyQt5.QtWidgets import QApplication from PyQt5.QtGui import QIcon import sys # Define function to run the QML application def runQML(): # Create an instance of QApplication app = QApplication(sys.argv) # Create an instance of QQmlApplicationEngine engine = QQmlApplicationEngine() # Set window icon for the application app.setWindowIcon(QIcon("codeloop.png")) # Load main QML file into the engine engine.load('main.qml') # Check if the QML file was loaded successfully if not engine.rootObjects(): # If not, return -1 to indicate an error return -1 # Start the application's event loop return app.exec_() if __name__ == "__main__": # call the runQML function and exit the program sys.exit(runQML()) |
So run the complete code and this will be the result
FAQs:
How to load an image in PyQt5?
For loading an image in PyQt5, you can use QPixmap class from the QtGui module. This is is an example of how to load an image:
|
1 2 3 4 5 6 7 8 9 10 |
from PyQt5.QtGui import QPixmap from PyQt5.QtWidgets import QLabel, QApplication import sys app = QApplication(sys.argv) label = QLabel() pixmap = QPixmap('codeloop.png') label.setPixmap(pixmap) label.show() sys.exit(app.exec_()) |
How to display image in Qt widget in Python?
For displaying an image in Qt widget using Python, you can use QLabel with a QPixmap. This is our example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
from PyQt5.QtGui import QPixmap from PyQt5.QtWidgets import QLabel, QVBoxLayout, QWidget, QApplication import sys app = QApplication(sys.argv) window = QWidget() layout = QVBoxLayout() label = QLabel() pixmap = QPixmap('codeloop.png') label.setPixmap(pixmap) layout.addWidget(label) window.setLayout(layout) window.show() sys.exit(app.exec_()) |
How to insert image in Qt?
To insert an image in a Qt application, follow these steps:
- Load the image using QPixmap.
- Display the image using a widget like QLabel.
|
1 2 3 4 5 6 7 8 9 10 |
from PyQt5.QtGui import QPixmap from PyQt5.QtWidgets import QLabel, QApplication import sys app = QApplication(sys.argv) label = QLabel() pixmap = QPixmap('codeloop.png') label.setPixmap(pixmap) label.show() sys.exit(app.exec_()) |
What is PyQt in Python?
PyQt is Python bindings for Qt application framework, using PyQt you can create desktop applications with native looking interfaces. PyQt is one of the best choice for developing cross platform GUI applications. PyQt provides access to all the functionalities of Qt framework, for example like widgets, network handling and many more.
This is a simple example of a PyQt application:
|
1 2 3 4 5 6 7 |
from PyQt5.QtWidgets import QApplication, QLabel import sys app = QApplication(sys.argv) label = QLabel('Hello codeloop.org') label.show() sys.exit(app.exec_()) |
Subscribe and Get Free Video Courses & Articles in your Email