qtdesign-UI using PyQt5 is not showing images on raspberry

Question

My ui created in qtdesign is not showing the images on raspberry pi 3B+ with LCD-screen. I added them to the ui via the resource and in qtDesign5 they do show up. I have tried to add the image as background for the QDialog, as background-image for the button and as image. And tried jpg, png and bmp files. None of the images are showing. What am I doing wrong?

This is how I am using the ui in my python-script.

#This program is a template for using a ui designed in QtDesign5
import sys
sys.path.append('/usr/lib/python3/dist-packages') #That's where PyQt5 is

from PyQt5.QtCore import pyqtSlot
from PyQt5.QtWidgets import QDialog, QApplication
from PyQt5.uic import loadUi


class Life2Coding(QDialog):
    def __init__(self):
        super(Life2Coding, self).__init__()
        loadUi('DoorbellUi.ui', self)
        self.setWindowTitle('Life2Coding PyQt5 Gui')
        self.pushButton.clicked.connect(self.on_pushButton_clicked)
    @pyqtSlot()
    def on_pushButton_clicked(self):
        self.pushButton.cursor()#Dummy function

app=QApplication(sys.argv)
widget=Life2Coding()
widget.show()
sys.exit(app.exec_())        

My resource-file:

<RCC>
  <qresource prefix="bellimages">
    <file>roundGould.jpg</file>
  </qresource>
  <qresource prefix="bmps">
    <file>beldan.bmp</file>
  </qresource>
</RCC>

And this is my ui:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Dialog</class>
 <widget class="QDialog" name="Dialog">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>425</width>
    <height>304</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Dialog</string>
  </property>
  <property name="styleSheet">
   <string notr="true">background-color:rgb(0, 255, 255);
background:url(:/bellimages/roundGould.jpg)</string>
  </property>
  <widget class="QPushButton" name="pushButton">
   <property name="geometry">
    <rect>
     <x>20</x>
     <y>110</y>
     <width>401</width>
     <height>111</height>
    </rect>
   </property>
   <property name="sizePolicy">
    <sizepolicy hsizetype="Minimum" vsizetype="Fixed">
     <horstretch>0</horstretch>
     <verstretch>0</verstretch>
    </sizepolicy>
   </property>
   <property name="font">
    <font>
     <family>Monotype Corsiva</family>
     <pointsize>48</pointsize>
     <italic>true</italic>
    </font>
   </property>
   <property name="cursor">
    <cursorShape>ArrowCursor</cursorShape>
   </property>
   <property name="styleSheet">
    <string notr="true">background-image: url(:/bmps/beldan.bmp);</string>
   </property>
   <property name="text">
    <string>Ding!Dong!</string>
   </property>
  </widget>
 </widget>
 <resources>
  <include location="qtScreendesign/qtResource.qrc"/>
 </resources>
 <connections/>
</ui>

Answer 1

Try to change the rows of ui file:

background:url(:/bellimages/roundGould.jpg)</string>
<string notr="true">background-image: url(:/bmps/beldan.bmp);</string>

to:

background:url(roundGould.jpg)</string>
<string notr="true">background-image: url(beldan.bmp);</string>

Reading the code you posted I think that the .jpg and .bmp files you want to use are in the same folder as the .py file in which you use the loadUi command. I encountered the same problem in one of my projects and I solved it by editing the file path in the .ui file by deleting :/prefix, indicating only the names of the file.

If you convert your .ui file through the command:

pyuic5 DoorbellUi.ui -o DorbellUi.py 

the lines that refer to your images become:

Dialog.setStyleSheet("background-color:rgb(0, 255, 255);\n"
"background:url(:/bellimages/roundGould.jpg)")

self.pushButton.setStyleSheet("background-image: url(:/bmps/beldan.bmp);")

I think the error is in the way the path is specified. Try rewriting the path file name in .ui file.