QML：为图像设置“源”属性会导致它消失

Question

我要做的是在 PyQt5 中使用 QML 更新图像的源。当我使用element.setProperty("source", "./testImage.png") 更改图像时，我收到以下错误消息。

QML 图像：协议“”未知

关于如何解决这个问题的任何想法？

我研究了与 QML 元素交互的其他方式，如果可能的话，我想坚持通过 Python 代码而不是仅通过 QML 来更改图像。

ma​​in.py

from PyQt5.QtWidgets import *
from PyQt5.QtQml import *
from PyQt5.QtCore import *
from PyQt5.QtQuick import *
from PyQt5 import *

import sys
import resource_rc

class MainWindow(QQmlApplicationEngine):
    def __init__(self):
        super().__init__()
        self.load("main.qml")
        self.rootContext().setContextProperty("MainWindow", self)

        self.window = self.rootObjects()[0]

        self.cardLeft = self.window.findChild(QObject, "cardLeft")

    @pyqtSlot()
    def changeImage(self):
        self.cardLeft.setProperty("source", "./images/3_of_clubs.png")

if __name__ == '__main__':
    app = QApplication(sys.argv)

    window = MainWindow()

    sys.exit(app.exec_())

ma​​in.qml

import QtQml 2.11
import QtQuick 2.3
import QtQuick.Controls 2.1
import QtQuick.Window 2.2
import QtQuick.Controls.Material 2.1
import QtQuick.Layouts 1.11

ApplicationWindow{
    id: screen
    width:  720
    height: 490
    visible: true
    Material.theme: Material.Dark

    Item {
      id: cards
      width: parent.width
      height: parent.height - toolBar.height
      anchors {
        top: parent.top;
        bottom: toolBar.top;
        bottomMargin: 10
      }

      RowLayout {
        anchors.fill: parent
        spacing: 20

        Image {
          objectName: "cardLeft"
          id: cardLeft
          Layout.fillWidth: true
          Layout.maximumHeight: 250
          Layout.minimumHeight: parent.height
          Layout.margins: 20

          source: "./testImage.png"
          fillMode: Image.PreserveAspectFit
        }
      }
    }

    Button {
      Layout.alignment: Qt.AlignHCenter
      Layout.fillWidth: true
      Layout.fillHeight: true
      Layout.maximumHeight: 100
      Layout.maximumWidth: 300
      Layout.margins: 20

      text: qsTr("Change Image")

      highlighted: true
      Material.accent: Material.color(Material.LightGreen)

      onClicked: MainWindow.changeImage()
    }
}

Answer 1

你必须传递一个QUrl，你必须使用QUrl::fromLocalFile()：

import os
import sys
from PyQt5 import QtCore, QtGui, QtQml
# import resource_rc

dir_path = os.path.dirname(os.path.realpath(__file__))


class MainWindow(QtQml.QQmlApplicationEngine):
    def __init__(self):
        super().__init__()
        self.load(QtCore.QUrl.fromLocalFile(os.path.join(dir_path, "main.qml")))
        self.rootContext().setContextProperty("MainWindow", self)

        if self.rootObjects():
            self.window = self.rootObjects()[0]
            self.cardLeft = self.window.findChild(QtCore.QObject, "cardLeft")

    @QtCore.pyqtSlot()
    def changeImage(self):
        if self.cardLeft:
            url = QtCore.QUrl.fromLocalFile(os.path.join(dir_path, "images/3_of_clubs.png"))
            self.cardLeft.setProperty("source", url)


if __name__ == '__main__':
    app = QtGui.QGuiApplication(sys.argv)
    window = MainWindow()
    sys.exit(app.exec_())