Qml带有img标签和换行模式的文本

Question

当我设置wrapMode，然后在Text组件中使用html标签时，我发现真的很奇怪。你可以试试这个例子：

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\">" 
    } 
} 

如果启动应用程序与此代码，并等待从网页加载的图像，单击“推送”按钮2次，你会看到，所有的图像消失了！但是，如果删除“wrapMode：Text.WordWrap”图像的大小变得越来越大，则图像不会消失。

那么我该如何解决它？我需要设置宽度和自动换行模式，但是我还需要在文本组件中使用html标记

Answer 1

您可以尝试保持文本的宽度以适合其内容吗？

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 
}