An images does not show in the program, using PySide and QtDesigner

Question

I am working on my Python project and use PySide as my GUI language. I had ask the same question about 1 week ago but the answer cannot solve my problem. So, I ask the new question and provide more details about my project.

My previous question is here: A .py file which compiled from .qrc file( using pyside-rcc ) does not work

I generate .py file from .ui file using pyside-uic, and generate .py file from .qrc file using pyside-rcc.

This is my file path and inside .qrc file

*The CLoginWidget.py is generated by pyside-uic and CLoginWidgetRes_rc.py is generated by pyside-rcc

And here is my example code using these resources

self.enterButton.setStyleSheet("QPushButton {\n"
"    image: url(:/button/res/login_enter_button.gif);\n"
"border-radius: 5px;\n"
"}\n"
"\n"
"QPushButton:hover {\n"
"    image: url(:/button/res/login_entered_button.gif);\n"
"}")

The problem is the images does not show in my program. Is anyone know what happens and how to solve this problem.

Thank you for all answer ;)

Answer 1

The actual problem in your example seems to be with the stylesheet-syntax. The QSS properties reference for image states that:

This property is for subcontrols only - we don't support it for other elements.

So it obviously won't work with a QPushButton, since it doesn't have any subcontrols. Perhaps you meant to use border-image or background-image?

These properties work exactly as expected for me, if I set up the resource module using the approach outlined in my previous answer on this subject.

Here is the actual stylesheet I tested with:

    self.button.setStyleSheet("""
        QPushButton {
            background-image: url(:/button/res/image.gif);
        }
        """)

EDIT:

Below is a minimal working example that shows how to use a resource correctly in pyside. All you need to do is ensure that there is an image file called res/login_enter_button.gif, and then save the example files below in the directory containing the res directory. You can then do:

pyside-uic -o example_ui.py example.ui
pyside-rcc -o example_rc.py example.qrc

and everything will work as expected.

example.qrc:

<RCC>
  <qresource prefix="button">
    <file>res/login_enter_button.gif</file>
  </qresource>
</RCC>

example.ui:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Window</class>
 <widget class="QWidget" name="Window">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>171</width>
    <height>61</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Hello World</string>
  </property>
  <layout class="QVBoxLayout" name="verticalLayout">
   <item>
    <widget class="QPushButton" name="button">
     <property name="text">
      <string>Test</string>
     </property>
    </widget>
   </item>
  </layout>
 </widget>
 <resources>
  <include location="example.qrc"/>
 </resources>
 <connections/>
</ui>

example.py

from PySide import QtGui
from example_ui import Ui_Window

class Window(QtGui.QWidget, Ui_Window):
    def __init__(self):
        QtGui.QWidget.__init__(self)
        self.setupUi(self)
        self.button.setStyleSheet("""
            QPushButton {
                background-image: url(:/button/res/login_enter_button.gif);
            }
            """)

if __name__ == '__main__':

    import sys
    app = QtGui.QApplication(sys.argv)
    window = Window()
    window.show()
    sys.exit(app.exec_())