Custom rqt plugin unable to load resource image

Question

I have been following this tutorial on creating an rqt plugin.

I have designed the .ui file of the plugin in 'QT 4 Designer', and created the resources there. My custom plugin contains a button with a background-image, styled as follows:

background: url(:/buttons/img/myImg.png) no-repeat center center fixed;
background-color:#1F1E24;

The image shows up in qt designer, but when I run it with rosrun rqt_my_plugin rqt_my_plugin the image does not show up. The background color does however load, so the stylesheet is applied somehow.

When I enter an absolute path for the background url it works just fine, the generated relative path however does not.

Does anyone know the solution to this problem?

Thanks in advance!

File structure

src
└── (contents omitted)
srcipts
└── (contents omitted)
resource
├── myImages.qrc
├── myPlugin.ui
└── img
    └── myImg.png

myImages.qrc

<RCC>
  <qresource prefix="/buttons">
    <file>img/myImg.png</file>
  </qresource>
</RCC>

myPlugin.ui (generated by QT 4 designer)

 <property name="styleSheet">
       <string notr="true">background: url(:/buttons/img/myImg.png) no-repeat center center fixed;
                           background-color:#1F1E24;
       </string>
 </property>

---

Originally posted by Isha Dijcks on ROS Answers with karma: 85 on 2019-01-17

Post score: 0

Answer 1

After a few tries I implemented a workaround where I set the url in the stylesheet programatically:

image_path = os.path.join(rospkg.RosPack().get_path('rqt_custom_plugin'), 'resource', 'img') + "myImg.png"

css_base = """
background: url(<img_path>) no-repeat center center;
background-color:#1F1E24;
"""
css = css_base.replace("<img_path>", img_path)

self._widget.my_button.setStyleSheet(css)

---

Originally posted by Isha Dijcks with karma: 85 on 2019-01-21

This answer was ACCEPTED on the original site

Post score: 0