Tour Preview

Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!


OverviewFelgo 2 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 5 years, 9 months ago by  GreenAsJade. Reason: fix silly HTML interpretation
    • This topic was modified 5 years, 9 months ago by  GreenAsJade.
    • This topic was modified 5 years, 9 months 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
            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.