Qml Text with img tag and wrap mode

Question

I find really strange behavior when I set wrapMode and then use html tags in Text component. You can try this example:

Text {
    id: text
    height: 32
    width: 100
    text: "<img width=\"32\" height=\"32\" align=\"middle\" src=\"http://vk.com/images/emoji/D83DDE0E.png\">"
    wrapMode: Text.WordWrap
}
Button {
    anchors.top: text.bottom
    text: "push"
    onClicked: {
        text.text = text.text + "<img width=\"32\" height=\"32\" align=\"middle\" src=\"http://vk.com/images/emoji/D83DDE0E.png\">"
    }
}

If you start app with this code and wait until image loaded from web, click "push" button 2 times, and you will see that all images disappear! However if you remove "wrapMode: Text.WordWrap" images will not disappear when size of images becomes bigger that width.

So how I can fix it? I need to set width and word wrap mode, however I also need to use html tags in Text component

DenimPowell DenimPowell · Accepted Answer · 2015-09-07T06:58:12

Could you try to keep the width of the text to fit its content?

Text {
    id: text
    height: 32

    // fit width to contentWidth
    width: contentWidth

    text: "<img width=\"32\" height=\"32\" align=\"middle\" src=\"http://vk.com/images/emoji/D83DDE0E.png\">"

    // Text.WordWrap is not needed.
    //wrapMode: Text.WordWrap
}

Qml Text with img tag and wrap mode

1 Answers