The background image of the frame does not appear.

_jao_victor_ · 1 Jan 2021, 18:14

Hello, I use qtDesigner to develop my GUIs and when I press "ctrl + r" to run the screen in qtDesigner everything appears fine, however when I open this GUI through Python (3.8.5) the image inside of the frame at the top of the screen does not appear. Does anyone know what can it be ? I use PyQt 5.14.1.

The image on the left is the executed inside qtDesigner (ctrl + r) and the one on the right is through Python.

Here is the Python code:

from PyQt5 import uic, QtGui, QtWidgets

app = QtWidgets.QApplication([])
telaDeLogin = uic.loadUi('templates/ui/telaDeLogin.ui')
telaDeLogin.button_login.clicked.connect(verificacaoLogin)
telaDeLogin.button_register.clicked.connect(register)
telaDeLogin.show()
app.exec()

JonB · 3 Jan 2021, 19:04

@_jao_victor_
I have not used resource files with Python. Normally they are compiled into the generated executable, which does not apply for Python. While you wait for @SGaist to tell you more, I would Google pyqt5 qrc file and I'm sure you'll get the information for what you need to do from there.

SGaist · 1 Jan 2021, 18:24

Hi,

Where is that image located on your disk ?

Unrelated note, please translate your thread title in English. You will likely miss help from people thinking it's in the wrong sub forum.

_jao_victor_ · S SGaist 1 Jan 2021, 13:23

@SGaist O título esta editado. Fiz um teste com a imagem na mesma pasta onde esta a GUI e deu erro novamente.

Segue o código XML:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>653</width>
    <height>513</height>
   </rect>
  </property>
  <property name="minimumSize">
   <size>
    <width>600</width>
    <height>500</height>
   </size>
  </property>
  <property name="maximumSize">
   <size>
    <width>16777215</width>
    <height>1234567</height>
   </size>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QVBoxLayout" name="verticalLayout">
    <property name="spacing">
     <number>0</number>
    </property>
    <property name="leftMargin">
     <number>0</number>
    </property>
    <property name="topMargin">
     <number>0</number>
    </property>
    <property name="rightMargin">
     <number>0</number>
    </property>
    <property name="bottomMargin">
     <number>0</number>
    </property>
    <item>
     <widget class="QFrame" name="area_logo">
      <property name="maximumSize">
       <size>
        <width>16777215</width>
        <height>115</height>
       </size>
      </property>
      <property name="styleSheet">
       <string notr="true">background-color: rgb(63, 125, 174);
</string>
      </property>
      <property name="frameShape">
       <enum>QFrame::StyledPanel</enum>
      </property>
      <property name="frameShadow">
       <enum>QFrame::Raised</enum>
      </property>
      <layout class="QHBoxLayout" name="horizontalLayout_2">
       <property name="spacing">
        <number>0</number>
       </property>
       <property name="leftMargin">
        <number>0</number>
       </property>
       <property name="topMargin">
        <number>0</number>
       </property>
       <property name="rightMargin">
        <number>0</number>
       </property>
       <property name="bottomMargin">
        <number>0</number>
       </property>
       <item>
        <widget class="QFrame" name="frame_image">
         <property name="maximumSize">
          <size>
           <width>140</width>
           <height>140</height>
          </size>
         </property>
         <property name="styleSheet">
          <string notr="true">#frame_image{
	background-image: url(:/images/agenda.png);
	background-position:center;
}
</string>
         </property>
         <property name="frameShape">
          <enum>QFrame::StyledPanel</enum>
         </property>
         <property name="frameShadow">
          <enum>QFrame::Raised</enum>
         </property>
        </widget>
       </item>
      </layout>
     </widget>
    </item>
    <item>
     <widget class="QFrame" name="box_register_login">
      <property name="styleSheet">
       <string notr="true">background-color: rgb(255, 255, 255);
</string>
      </property>
      <property name="frameShape">
       <enum>QFrame::StyledPanel</enum>
      </property>
      <property name="frameShadow">
       <enum>QFrame::Raised</enum>
      </property>
      <layout class="QHBoxLayout" name="horizontalLayout">
       <property name="spacing">
        <number>0</number>
       </property>
       <property name="leftMargin">
        <number>0</number>
       </property>
       <property name="topMargin">
        <number>0</number>
       </property>
       <property name="rightMargin">
        <number>0</number>
       </property>
       <property name="bottomMargin">
        <number>0</number>
       </property>
       <item>
        <widget class="QFrame" name="box_login">
         <property name="maximumSize">
          <size>
           <width>240</width>
           <height>320</height>
          </size>
         </property>
         <property name="styleSheet">
          <string notr="true">background-color: rgb(63, 125, 174);
</string>
         </property>
         <property name="frameShape">
          <enum>QFrame::NoFrame</enum>
         </property>
         <property name="frameShadow">
          <enum>QFrame::Raised</enum>
         </property>
         <widget class="QLineEdit" name="login_login">
          <property name="geometry">
           <rect>
            <x>10</x>
            <y>100</y>
            <width>221</width>
            <height>23</height>
           </rect>
          </property>
          <property name="font">
           <font>
            <pointsize>9</pointsize>
           </font>
          </property>
          <property name="styleSheet">
           <string notr="true">#login_login{
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    min-width: 5em;
	color:white;
}</string>
          </property>
          <property name="text">
           <string/>
          </property>
          <property name="alignment">
           <set>Qt::AlignCenter</set>
          </property>
          <property name="dragEnabled">
           <bool>false</bool>
          </property>
          <property name="placeholderText">
           <string>LOGIN</string>
          </property>
          <property name="cursorMoveStyle">
           <enum>Qt::LogicalMoveStyle</enum>
          </property>
         </widget>
         <widget class="QLineEdit" name="login_password">
          <property name="geometry">
           <rect>
            <x>10</x>
            <y>170</y>
            <width>221</width>
            <height>23</height>
           </rect>
          </property>
          <property name="styleSheet">
           <string notr="true">#login_password{
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    min-width: 5em;
	color:white;
}
</string>
          </property>
          <property name="text">
           <string/>
          </property>
          <property name="frame">
           <bool>true</bool>
          </property>
          <property name="echoMode">
           <enum>QLineEdit::Normal</enum>
          </property>
          <property name="alignment">
           <set>Qt::AlignCenter</set>
          </property>
          <property name="placeholderText">
           <string>PASSWORD</string>
          </property>
          <property name="cursorMoveStyle">
           <enum>Qt::LogicalMoveStyle</enum>
          </property>
         </widget>
         <widget class="QLabel" name="label">
          <property name="geometry">
           <rect>
            <x>90</x>
            <y>20</y>
            <width>71</width>
            <height>20</height>
           </rect>
          </property>
          <property name="font">
           <font>
            <pointsize>14</pointsize>
           </font>
          </property>
          <property name="styleSheet">
           <string notr="true">color:white</string>
          </property>
          <property name="text">
           <string>LOGIN</string>
          </property>
         </widget>
         <widget class="QPushButton" name="button_login">
          <property name="geometry">
           <rect>
            <x>80</x>
            <y>280</y>
            <width>80</width>
            <height>23</height>
           </rect>
          </property>
          <property name="font">
           <font>
            <pointsize>10</pointsize>
           </font>
          </property>
          <property name="styleSheet">
           <string notr="true">#button_login{
	color: black;
	background-color: rgb(0, 255, 0);
	border-style: solid;
}

#button_login:hover{
	background-color: rgb(0, 255, 127);
}

#button_login:pressed{
	background-color: rgb(202, 202, 202);
}</string>
          </property>
          <property name="text">
           <string>Login</string>
          </property>
         </widget>
        </widget>
       </item>
       <item>
        <widget class="QFrame" name="box_register">
         <property name="maximumSize">
          <size>
           <width>240</width>
           <height>320</height>
          </size>
         </property>
         <property name="styleSheet">
          <string notr="true">background-color: rgb(63, 125, 174);

</string>
         </property>
         <property name="frameShape">
          <enum>QFrame::NoFrame</enum>
         </property>
         <property name="frameShadow">
          <enum>QFrame::Raised</enum>
         </property>
         <widget class="QLineEdit" name="register_name">
          <property name="geometry">
           <rect>
            <x>10</x>
            <y>100</y>
            <width>221</width>
            <height>23</height>
           </rect>
          </property>
          <property name="styleSheet">
           <string notr="true">#register_name{
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    min-width: 5em;
	color:white;
}</string>
          </property>
          <property name="alignment">
           <set>Qt::AlignCenter</set>
          </property>
          <property name="placeholderText">
           <string>NAME</string>
          </property>
         </widget>
         <widget class="QLineEdit" name="register_password">
          <property name="geometry">
           <rect>
            <x>10</x>
            <y>210</y>
            <width>221</width>
            <height>23</height>
           </rect>
          </property>
          <property name="styleSheet">
           <string notr="true">#register_password{
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    min-width: 5em;
	color:white;
}</string>
          </property>
          <property name="alignment">
           <set>Qt::AlignCenter</set>
          </property>
          <property name="placeholderText">
           <string>PASSWORD</string>
          </property>
         </widget>
         <widget class="QLineEdit" name="register_login">
          <property name="geometry">
           <rect>
            <x>10</x>
            <y>158</y>
            <width>221</width>
            <height>23</height>
           </rect>
          </property>
          <property name="styleSheet">
           <string notr="true">#register_login{
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    min-width: 5em;
	color:white;
}</string>
          </property>
          <property name="alignment">
           <set>Qt::AlignCenter</set>
          </property>
          <property name="placeholderText">
           <string>LOGIN</string>
          </property>
         </widget>
         <widget class="QLabel" name="label_2">
          <property name="geometry">
           <rect>
            <x>80</x>
            <y>20</y>
            <width>101</width>
            <height>20</height>
           </rect>
          </property>
          <property name="font">
           <font>
            <pointsize>14</pointsize>
           </font>
          </property>
          <property name="styleSheet">
           <string notr="true">color:white</string>
          </property>
          <property name="text">
           <string>REGISTER</string>
          </property>
         </widget>
         <widget class="QPushButton" name="button_register">
          <property name="geometry">
           <rect>
            <x>90</x>
            <y>280</y>
            <width>80</width>
            <height>23</height>
           </rect>
          </property>
          <property name="styleSheet">
           <string notr="true">#button_register{
	color: black;
	background-color: rgb(0, 255, 0);
	border-style: solid;
}

#button_register:hover{
	background-color: rgb(0, 255, 127);
}

#button_register:pressed{
	background-color: rgb(202, 202, 202);
}</string>
          </property>
          <property name="text">
           <string>Register</string>
          </property>
         </widget>
        </widget>
       </item>
      </layout>
     </widget>
    </item>
   </layout>
  </widget>
 </widget>
 <resources>
  <include location="../images/images.qrc"/>
 </resources>
 <connections/>
</ui>

E aqui o código Python que abre a GUI:

app = QtWidgets.QApplication([])
telaDeLogin = uic.loadUi('templates/ui/telaDeLogin.ui')
telaDeLogin.button_login.clicked.connect(verificacaoLogin)
telaDeLogin.button_register.clicked.connect(register)
telaDeLogin.show()
app.exec()

SGaist · 2 Jan 2021, 04:34

Can you translate please ?

Did you generate the Python code from the .qrc file that will contain your image ?

_jao_victor_ · S SGaist 1 Jan 2021, 19:17

@SGaist I developed the GUI using qtDesigner as usual and a '.ui' file is generated. To run the GUI I use this Python code:

from PyQt5 import uic, QtGui, QtWidgets

app = QtWidgets.QApplication([])
telaDeLogin = uic.loadUi('templates/ui/telaDeLogin.ui')
telaDeLogin.button_login.clicked.connect(verificacaoLogin)
telaDeLogin.button_register.clicked.connect(register)
telaDeLogin.show()
app.exec()

The screen is rendered normally, but the yellow phonebook image at the top of the screen does not appear.

SGaist · 2 Jan 2021, 23:50

If you take a look at the path of the image, it's a Qt resource path. Therefore you likely have a .qrc file somewhere, you need to generate the corresponding Python script and import it so the image can be loaded.

_jao_victor_ · 3 Jan 2021, 08:14

@SGaist Yes, I have the .qrc file (images.qrc) inside the folder where all my images are. This is the contents of the .qrc file:

<RCC>
  <qresource prefix="images">
    <file>agenda.png</file>
  </qresource>
</RCC>

I mean I need to transform this into Python and then import it into the code?

JonB · 3 Jan 2021, 19:04

@_jao_victor_
I have not used resource files with Python. Normally they are compiled into the generated executable, which does not apply for Python. While you wait for @SGaist to tell you more, I would Google pyqt5 qrc file and I'm sure you'll get the information for what you need to do from there.

_jao_victor_ · 1 Mar 2021, 19:05

@JonB I did it. I'll leave the link here where I found the solution to the problem if anyone wants. Thanks.

SGaist · wrote on 3 Jan 2021, 19:20

Great !

Since you have it working now, please mark the thread as solved using the "Topic Tools" button or the three dotted menu beside the answer you deem correct so that other forum users may know a solution has been found :-)