显示图片的三种方法

如果要透过 PyQt6 显示图片，常常会透过 QLabel、QGraphicsView 或 QPainter 这三种方法进行图片的显示，这篇教学会介绍这三种常用的方法。

快速导览：

• 使用 QLabel + QPixmap
• 使用 QGraphicsView + QPixmap
• 使用 QPainter

因为 Google Colab 不支援 PyQt6，所以请使用本机环境 ( 参考：使用 Python 虚拟环境 ) 或使用 Anaconda Jupyter 进行实作 ( 参考：使用 Anaconda )。

使用 QLabel + QPixmap

QLabel 虽然是标签元件 ( 参考“QLabel 标签” )，但也常作为图片的显示元件使用，如果要透过 QLabel 显示图片，必须搭配 QPixmap 方法一同使用，使用的基本方法如下：

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
import sys

app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
MainWindow.setObjectName("MainWindow")
MainWindow.setWindowTitle("oxxo.studio")
MainWindow.resize(300, 200)

label = QtWidgets.QLabel(MainWindow)    # 放入 QLabel
label.setGeometry(0, 0, 300, 200)       # 設定 QLabel 尺寸和位置

qpixmap = QPixmap()                     # 建立 QPixmap 物件
qpixmap.load('mona.jpg')                # 讀取圖片
# 也可以寫成下面這樣
# qpixmap = QPixmap('mona.jpg')
label.setPixmap(qpixmap)                # 將 QPixmap 物件加入到 label 裡

MainWindow.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
import sys

class mainWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 200)
        self.ui()

    def ui(self):
        self.label = QtWidgets.QLabel(self)     # 放入 QLabel
        self.label.setGeometry(0, 0, 300, 200)  # 設定 QLabel 尺寸和位置

        self.qpixmap = QPixmap()                # 建立 QPixmap 物件
        self.qpixmap.load('mona.jpg')           # 讀取圖片
        # 也可以寫成下面這樣
        # self.qpixmap = QPixmap('mona.jpg')
        self.label.setPixmap(self.qpixmap)      # 將 QPixmap 物件加入到 label 裡

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = mainWindow()
    Form.show()
    sys.exit(app.exec())

QPixmap 对象除了使用 load 的方法读图片，也可以搭配 QImage 读取图片，下方的程序码会使用 QImage 的做法：

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
import sys

app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
MainWindow.setObjectName("MainWindow")
MainWindow.setWindowTitle("oxxo.studio")
MainWindow.resize(300, 200)

label = QtWidgets.QLabel(MainWindow)
label.setGeometry(0, 0, 300, 200)

qpixmap = QPixmap()
qimg = QImage('mona.jpg')            # 讀取圖片
qpixmap = qpixmap.fromImage(qimg)    # 將圖片加入 QPixmap 物件中
label.setPixmap(qpixmap)             # 將 QPixmap 物件加入到 label 裡
MainWindow.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
import sys

class mainWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 200)
        self.ui()

    def ui(self):
        self.label = QtWidgets.QLabel(self)
        self.label.setGeometry(0, 0, 300, 200)

        qpixmap = QPixmap()
        qimg = QImage('mona.jpg')            # 讀取圖片
        qpixmap = qpixmap.fromImage(qimg)    # 將圖片加入 QPixmap 物件中
        self.label.setPixmap(qpixmap)        # 將 QPixmap 物件加入到 label 裡

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = mainWindow()
    Form.show()
    sys.exit(app.exec())

建立 QPixmap 对象后，就能使用 scaled 方法产生不同尺寸的新对象，下方的程序码值执行后，会在画面中放入两张不同尺寸的图片。

• 一个 QLabel 里只能存在一个 QPixmap 对象，因此如果要放入两张图片，需要使用两个 QLable。
• 如果要调整图片位置，可使用 QLabel 的 move 方法进行调整。

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
import sys

app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
MainWindow.setObjectName("MainWindow")
MainWindow.setWindowTitle("oxxo.studio")
MainWindow.resize(300, 200)

label = QtWidgets.QLabel(MainWindow)  #  建立 QLabel
label.setGeometry(0, 0, 300, 200)
label2 = QtWidgets.QLabel(MainWindow) #  建立 QLabel
label2.setGeometry(0, 0, 300, 200)
label2.move(0, -50)                   # 調整位置

qpixmap = QPixmap()
qpixmap.load('mona.jpg')
img1 = qpixmap.scaled(300,50)    # 建立圖片 1
label.setPixmap(img1)            # 加入圖片 1
img2 = qpixmap.scaled(150,200)   # 建立圖片 2
label2.setPixmap(img2)           # 加入圖片 2
MainWindow.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
import sys

class mainWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 200)
        self.ui()

    def ui(self):
        self.label = QtWidgets.QLabel(self)  #  建立 QLabel
        self.label.setGeometry(0, 0, 300, 200)
        self.label2 = QtWidgets.QLabel(self) #  建立 QLabel
        self.label2.setGeometry(0, 0, 300, 200)
        self.label2.move(0, -50)                   # 調整位置

        qpixmap = QPixmap()
        qpixmap.load('mona.jpg')
        img1 = qpixmap.scaled(300,50)    # 建立圖片 1
        self.label.setPixmap(img1)            # 加入圖片 1
        img2 = qpixmap.scaled(150,200)   # 建立圖片 2
        self.label2.setPixmap(img2)           # 加入圖片 2

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = mainWindow()
    Form.show()
    sys.exit(app.exec())

使用 QGraphicsView + QPixmap

参考“QGraphicsView 显示图片”，透过建立 QGraphicsView 对象，就能搭配 QPixmap 方法显示图片，下方的程序码执行后，会在画面中放入蒙娜丽莎像。

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
import sys

app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
MainWindow.setObjectName("MainWindow")
MainWindow.setWindowTitle("oxxo.studio")
MainWindow.resize(300, 300)

grview = QtWidgets.QGraphicsView(MainWindow)  # 加入 QGraphicsView
grview.setGeometry(0, 0, 300, 300)            # 設定 QGraphicsView 位置與大小
scene = QtWidgets.QGraphicsScene()            # 加入 QGraphicsScene
scene.setSceneRect(0, 0, 200, 200)            # 設定 QGraphicsScene 位置與大小
img = QPixmap('mona.jpg')                     # 加入圖片
scene.addPixmap(img)                          # 將圖片加入 scene
grview.setScene(scene)                        # 設定 QGraphicsView 的場景為 scene

MainWindow.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
import sys

class mainWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 300)
        self.ui()

    def ui(self):
        grview = QtWidgets.QGraphicsView(self)     # 加入 QGraphicsView
        grview.setGeometry(0, 0, 300, 300)         # 設定 QGraphicsView 位置與大小
        scene = QtWidgets.QGraphicsScene()         # 加入 QGraphicsScene
        scene.setSceneRect(0, 0, 200, 200)         # 設定 QGraphicsScene 位置與大小
        img = QPixmap('mona.jpg')                  # 加入圖片
        scene.addPixmap(img)                       # 將圖片加入 scene
        grview.setScene(scene)                     # 設定 QGraphicsView 的場景為 scene

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = mainWindow()
    Form.show()
    sys.exit(app.exec())

因为 setSceneRect 的定位是以“中心点”为主，如果要改成熟悉的“左上角”定位，就得透过简单的数学公式换算，下方的程序码执行后，除了会透过 scaled 调整尺寸，也会将场景定位在左上角 (20,20) 的位置。

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
import sys

app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
MainWindow.setObjectName("MainWindow")
MainWindow.setWindowTitle("oxxo.studio")
MainWindow.resize(300, 300)

grview = QtWidgets.QGraphicsView(MainWindow)
gw = 300
gh = 300
grview.setGeometry(0, 0, gw, gh)      # QGraphicsView 的長寬改成變數
scene = QtWidgets.QGraphicsScene()
img = QPixmap('mona.jpg')
img_w = 120                           # 顯示圖片的寬度
img_h = 160                           # 顯示圖片的高度
img = img.scaled(img_w, img_h)        # 改變圖片尺寸
x = 20                                # 左上角 x 座標
y = 20                                # 左上角 y 座標
dx = int((gw - img_w) / 2) - x        # 修正公式
dy = int((gh - img_h) / 2) - y
scene.setSceneRect(dx, dy, img_w, img_h)
scene.addPixmap(img)
grview.setScene(scene)

MainWindow.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
import sys

class mainWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 300)
        self.ui()

    def ui(self):
        grview = QtWidgets.QGraphicsView(self)
        gw = 300
        gh = 300
        grview.setGeometry(0, 0, gw, gh)      # QGraphicsView 的長寬改成變數
        scene = QtWidgets.QGraphicsScene()
        img = QPixmap('mona.jpg')
        img_w = 120                           # 顯示圖片的寬度
        img_h = 160                           # 顯示圖片的高度
        img = img.scaled(img_w, img_h)        # 改變圖片尺寸
        x = 20                                # 左上角 x 座標
        y = 20                                # 左上角 y 座標
        dx = int((gw - img_w) / 2) - x        # 修正公式
        dy = int((gh - img_h) / 2) - y
        scene.setSceneRect(dx, dy, img_w, img_h)
        scene.addPixmap(img)
        grview.setScene(scene)

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = mainWindow()
    Form.show()
    sys.exit(app.exec())

如果要加入多张图片，就要使用 QItem 的做法，下方的程序码执行后，会在场景里放入两个图片尺寸不同的 QItem。

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
import sys

app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
MainWindow.setObjectName("MainWindow")
MainWindow.setWindowTitle("oxxo.studio")
MainWindow.resize(300, 300)

grview = QtWidgets.QGraphicsView(MainWindow)  # 加入 QGraphicsView
grview.setGeometry(0, 0, 300, 300)            # 設定 QGraphicsView 位置與大小
scene = QtWidgets.QGraphicsScene()            # 加入 QGraphicsScene
scene.setSceneRect(0, 0, 200, 200)            # 設定 QGraphicsScene 位置與大小
img = QPixmap('mona.jpg')                     # 建立圖片
img1 = img.scaled(200,50)                     # 建立不同尺寸圖片
qitem1 = QtWidgets.QGraphicsPixmapItem(img1)  # 設定 QItem，內容是 img1
img2 = img.scaled(100,150)                    # 建立不同尺寸圖片
qitem2 = QtWidgets.QGraphicsPixmapItem(img2)  # 設定 QItem，內容是 img2
scene.addItem(qitem1)                         # 場景中加入 QItem
scene.addItem(qitem2)                         # 場景中加入 QItem
grview.setScene(scene)                        # 設定 QGraphicsView 的場景為 scene

MainWindow.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
import sys

class mainWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 300)
        self.ui()

    def ui(self):
        grview = QtWidgets.QGraphicsView(self)        # 加入 QGraphicsView
        grview.setGeometry(0, 0, 300, 300)            # 設定 QGraphicsView 位置與大小
        scene = QtWidgets.QGraphicsScene()            # 加入 QGraphicsScene
        scene.setSceneRect(0, 0, 200, 200)            # 設定 QGraphicsScene 位置與大小
        img = QPixmap('mona.jpg')                     # 建立圖片
        img1 = img.scaled(200,50)                     # 建立不同尺寸圖片
        qitem1 = QtWidgets.QGraphicsPixmapItem(img1)  # 設定 QItem，內容是 img1
        img2 = img.scaled(100,150)                    # 建立不同尺寸圖片
        qitem2 = QtWidgets.QGraphicsPixmapItem(img2)  # 設定 QItem，內容是 img2
        scene.addItem(qitem1)                         # 場景中加入 QItem
        scene.addItem(qitem2)                         # 場景中加入 QItem
        grview.setScene(scene)                        # 設定 QGraphicsView 的場景為 scene

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = mainWindow()
    Form.show()
    sys.exit(app.exec())

使用 QPainter

参考“QPainter 放入图片”，透过 QPainter 的 drawImage 方法，就能显示已经转换成 QImage 的图片，使用时需要搭配 QRect 指定图片的左上角座标以及长宽，下方的程序码执行后，画面里会出现一张蒙娜丽莎的画像。

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
from PyQt6.QtCore import *
import sys

app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
MainWindow.setObjectName("MainWindow")
MainWindow.setWindowTitle("oxxo.studio")
MainWindow.resize(300, 300)

def draw(self):
    qpainter = QPainter()
    qpainter.begin(MainWindow)

    qimage = QImage('mona.jpg')
    w = qimage.size().width()
    h = qimage.size().height()
    qpainter.drawImage(QRect(20, 20, w, h), qimage)

    qpainter.end()

MainWindow.paintEvent = draw
MainWindow.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
from PyQt6.QtCore import *
import sys

class mainWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 300)

    def paintEvent(self, event):
        qpainter = QPainter()
        qpainter.begin(self)

        qimage = QImage('mona.jpg')
        w = qimage.size().width()
        h = qimage.size().height()
        qpainter.drawImage(QRect(20, 20, w, h), qimage)

        qpainter.end()

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = mainWindow()
    Form.show()
    sys.exit(app.exec())

修改 QRect 的参数，就能改变放入图片的位置和大小，下方的程序码执行后，画面里会出现两张位置与大小不同的蒙娜丽莎像。

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
from PyQt6.QtCore import *
import sys

app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
MainWindow.setObjectName("MainWindow")
MainWindow.setWindowTitle("oxxo.studio")
MainWindow.resize(300, 200)

def draw(self):
    qpainter = QPainter()
    qpainter.begin(MainWindow)

    qimage = QImage('mona.jpg')
    qpainter.drawImage(QRect(0, 0, 100, 150), qimage)
    qpainter.drawImage(QRect(150, 30, 150, 150), qimage)

    qpainter.end()

MainWindow.paintEvent = draw
MainWindow.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets
from PyQt6.QtGui import *
from PyQt6.QtCore import *
import sys

class mainWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 200)

    def paintEvent(self, event):
        qpainter = QPainter()
        qpainter.begin(self)

        qimage = QImage('mona.jpg')
        qpainter.drawImage(QRect(0, 0, 100, 150), qimage)
        qpainter.drawImage(QRect(150, 30, 150, 150), qimage)

        qpainter.end()

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = mainWindow()
    Form.show()
    sys.exit(app.exec())

意见反馈