Displaying an image using PyQt5 in Python

In this post, I will specifically be demonstrating to you the use of a QGraphicsView() widget in PyQt5. I’ll be using Python 3.7 and the versions of other modules are as follows:

PyQt5: '5.13.0'

Python: '3.7.4 (tags/v3.7.4:e09359112e, Jul 8 2019, 19:29:22) [MSC v.1916 32 bit (Intel)]'

Ways To view image using Python and PyQt5

The first thing you have to do, to view any image on any PyQt5 window, is you have to use the QPixmap function from PyQt5.QtGui.

from PyQt5.QtGui import QPixmap


Now, you have to load an image using QPixmap.

For this, you can either create an instance of the QPixmap function and then load the image using the .load() attribute of QPixmap():

pix = QPixmap()
pix.load(image_path)

Or, you can Directly pass the image_path to the QPixmap function, like this:

pix = QPixmap(image_path)

Up to this was the loading of the image located in your Device. Now to display the loaded image, we have two common options. Either we can use QGraphicsViewer or we can use QLabel widget to display the image to the PyQt5 window.

Displaying the loaded Image:

Using QLabel:

label_image = QLabel()
label_image.setPixmap(QPixmap(image_path))

(Note: Viewing Image file using QLabel requires setting up of a proper layout and central widget for the window)

Using QGraphicsView() widget:

pix = QPixmap(image_path)
item = QWidgets.QGraphicsPixmapItem(pix)
scene = QWidgets.QGraphicsScence(self)
scene.addItem(item)
self.ui.graphicsView.setScene(scene)

Here, graphicsView widget can be created using:

graphicsView = QtWidgets.QGraphicsView(Dialog)

You can see the full demonstration of the latter option in the below image viewer application.

Overview of the Working of the Application

On this application, you can view any image located on your computer. You have to just put the image file path and press the “open” button to see the picture.

I will design the layout of my GUI window using the Qt Designer. Then convert the generated .ui file to Python file using pyuic5 command utility! The design will look like this:

As this is a very basic image opener, I have used some simple widgets. It has 1 LineEdit widget 1 PushButton and 1 GraphicsViewer widget.

Generating the Python file from the .ui file

Open the terminal and move to the directory where your .ui file is saved. And use this command:

pyuic5 image_viewer.ui -o image_viewer.py

It will generate a Python file in the same directory (image_viewer.py). Create a new Python file in the same directory and name it “call_image_viewer.py” and edit that file to import the generated Python file(image_viewer). And also to assign an event to the clicking of the open button as follows:

from image_viewer import *
from PyQt5.QtWidgets import QApplication, QDialog
from PyQt5.QtGui import QPixmap
import os
import sys


class My_Application(QDialog):
    def __init__(self):
        super().__init__()
        self.ui = Ui_Dialog()
        self.ui.setupUi(self)

        self.ui.pushButton.clicked.connect(self.checkPath)
        print(self.checkPath())

    def checkPath(self):
        image_path = self.ui.lineEdit.text()
        if os.path.isfile(image_path):
            scene = QtWidgets.QGraphicsScene(self)
            pixmap = QPixmap(image_path)
            item = QtWidgets.QGraphicsPixmapItem(pixmap)
            scene.addItem(item)
            self.ui.graphicsView.setScene(scene)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    class_instance = My_Application()
    class_instance.show()
    sys.exit(app.exec_())

A short overview of the “call_image_viewer.py” file.
I have simply created an instance of the first Python file and call that instance to tract the mouse clicking event on the pushButton widget. As a result of this, as soon as you press the open button the control moves to the checkPath() method and checks if the provided path is valid or not. And finally opens the image file, as shown:

The two complete codes are as follows:

1. image_viewer.py

   from PyQt5 import QtCore, QtGui, QtWidgets
   
   
   class Ui_Dialog(object):
       def setupUi(self, Dialog):
           Dialog.setObjectName("Dialog")
           Dialog.resize(766, 569)
           self.label = QtWidgets.QLabel(Dialog)
           self.label.setGeometry(QtCore.QRect(30, 20, 61, 21))
           self.label.setObjectName("label")
           self.lineEdit = QtWidgets.QLineEdit(Dialog)
           self.lineEdit.setGeometry(QtCore.QRect(100, 20, 641, 20))
           self.lineEdit.setObjectName("lineEdit")
           self.graphicsView = QtWidgets.QGraphicsView(Dialog)
           self.graphicsView.setGeometry(QtCore.QRect(25, 71, 721, 491))
           self.graphicsView.setSizeIncrement(QtCore.QSize(0, 0))
           self.graphicsView.setFrameShadow(QtWidgets.QFrame.Raised)
           self.graphicsView.setSizeAdjustPolicy(QtWidgets.QAbstractScrollArea.AdjustToContentsOnFirstShow)
           self.graphicsView.setAlignment(QtCore.Qt.AlignJustify|QtCore.Qt.AlignVCenter)
           self.graphicsView.setObjectName("graphicsView")
           self.pushButton = QtWidgets.QPushButton(Dialog)
           self.pushButton.setGeometry(QtCore.QRect(670, 40, 75, 23))
           self.pushButton.setObjectName("pushButton")
   
           self.retranslateUi(Dialog)
           QtCore.QMetaObject.connectSlotsByName(Dialog)
   
       def retranslateUi(self, Dialog):
           _translate = QtCore.QCoreApplication.translate
           Dialog.setWindowTitle(_translate("Dialog", "Image Viewer"))
           self.label.setText(_translate("Dialog", "Image Path"))
           self.pushButton.setText(_translate("Dialog", "open"))
   

   2. call_image_viewer.py

   from image_viewer import *
   from PyQt5.QtWidgets import QApplication, QDialog
   from PyQt5.QtGui import QPixmap
   import os
   import sys
   
   
   class My_Application(QDialog):
       def __init__(self):
           super().__init__()
           self.ui = Ui_Dialog()
           self.ui.setupUi(self)
   
           self.ui.pushButton.clicked.connect(self.checkPath)
   
       def checkPath(self):
           image_path = self.ui.lineEdit.text()
           if os.path.isfile(image_path):
               scene = QtWidgets.QGraphicsScene(self)
               pixmap = QPixmap(image_path)
               item = QtWidgets.QGraphicsPixmapItem(pixmap)
               scene.addItem(item)
               self.ui.graphicsView.setScene(scene)
   
   
   if __name__ == '__main__':
       app = QApplication(sys.argv)
       class_instance = My_Application()
       class_instance.show()
       sys.exit(app.exec_())
   

    

Also read:

• Close a window in PyQt5 in Python