Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business


OverviewFelgo 3 Support (Qt 5) › Trouble publishing code that uses img tag in Text

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #8906


    I have an embedded HTML img tag in text, like this:


        MenuButton {
            text: 'img src="../../assets/img/cog.png" height="20" width="20"'
            font.pixelSize: 14



    … which works fine in the test version of the app.

    (You have to imagine angle brackets are there, I can’t type them in this post, because the forum interprets them!)


    However, when I configure the build for publishing, I get

    qrc:/qml/common/MenuButton.qml:27:5: QML Text: Cannot open: qrc:/assets/img/cog.png


    cog.png is definitely present in the assets/img folder.   Unfortunately I don’t understand well enough how the whole packaging up “qrc” thing works.



    • This topic was modified 9 years ago by  GreenAsJade. Reason: fix silly HTML interpretation
    • This topic was modified 9 years ago by  GreenAsJade.
    • This topic was modified 9 years ago by  GreenAsJade.

    Felgo Team


    Is your assets folder set up for deployment like in our empty project template:

    assetsFolder.source = assets
    DEPLOYMENTFOLDERS += assetsFolder

    Also, is the MenuButton item a custom item or one from the QtQuick Controls library?





    Yes, it is set up like that.

    cog.png is the “odd” img asset in my app: it’s the only one instantiated via an img tag instead of via source property.

    The MenuButon is a custom one – I think I based it on one I found in the examples.  I had to modify it because the original one I had didn’t work when instantiated inside a GridView…



    import QtQuick 2.0
    Rectangle {
        id: button
        // this will be the default size, it is same size as the contained text + some padding
        width: buttonText.width+ paddingHorizontal*2
        height: buttonText.height+ paddingVertical*2
        color: "#e9e9e9"
        // round edges
        radius: 10
        // the horizontal margin from the Text element to the Rectangle at both the left and the right side.
        property int paddingHorizontal: 10
        // the vertical margin from the Text element to the Rectangle at both the top and the bottom side.
        property int paddingVertical: 5
        // access the text of the Text component
        property alias text: buttonText.text
        property alias font: buttonText.font
        property alias mouseArea: mouseArea
        // this handler is called when the button is clicked.
        signal clicked
        Text {
            id: buttonText
            anchors.centerIn: parent
            font.pixelSize: 18
            font.family: titleFont.name
            color: "black"
        PropertyAnimation {
            target: button
            property: "opacity"
            duration: 300
            to: 1
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true
            onClicked: {
            onPressed: {
                button.opacity = 0.5;
                buttonPressAnimation.start()   // onReleased is not reliably received when in a GridView, so just do it this way




    I realised a workaround:


         // Preferences
         MenuButton {
    -        text: 'img src="../../assets/img/cog.png" height="20" width="20"'
    +        id: settingsButton
    +        text: "      "
             font.pixelSize: 14
             // anchor the button to the gameWindowAnchorItem to be on the edge of the screen on any device
             anchors.left: selectLevelScene.gameWindowAnchorItem.left
             anchors.leftMargin: 10
             anchors.bottom: selectLevelScene.gameWindowAnchorItem.bottom
             anchors.bottomMargin: 10
             onClicked: preferencesButtonPressed()
    +    Image {
    +        id: settingsButtonLabel
    +        source: "../../assets/img/cog.png"
    +        anchors.centerIn: settingsButton
    +        height: 20
    +        width: 20
    +    }


    … obviously not as nice as the embedded img though 🙂



    (and this workaround wouldn’t work in a more general case of embedding images inside non-empty text!)


Viewing 5 posts - 1 through 5 (of 5 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded