[Martin]

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.

 

Help!

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

[AlexFelgo Team]

Hello,

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?

Thanks,

Alex

[Martin]

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…

 

MenuButton.qml

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 {
        id:buttonPressAnimation
        target: button
        property: "opacity"
        duration: 300
        to: 1
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            button.clicked()
        }
        onPressed: {
            button.opacity = 0.5;
            buttonPressAnimation.start()   // onReleased is not reliably received when in a GridView, so just do it this way
        }
    }
}

 

[Martin]

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 🙂

[Martin]

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