Image centering in QML TextArea not working

Fausto01

Hello everyone, I have this code:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    TextArea {
        anchors.fill: parent
        textFormat: TextArea.RichText
        text: "<center>TEST TEXT<br>
              <img src=\"https://cdn.pixabay.com/photo/2014/06/03/19/38/road-sign-361514_960_720.png\" height=300 width=300/><br>
              OTHER TEST TEXT</center>"
        readOnly: true
        padding: 0
    }
}

The text is correctly centered while the image is not. Am I doing something wrong?

mzimmers

That's not how text and images are normally declared in QML. Use the horizontalAlignment and verticalAlignment properties of the TextArea. And, though I'm not sure what you're trying to do, I think you'd want to use an Image declaration, and set its properties to place it where you want.

Fausto01

@mzimmers I'm just trying to render an HTML text. The text comes from a library and it can contains images. The problem is that if you put the html above in a file and open it, everything works fine and the image is centered, if you try to render it in a TextArea the image is not centered.

mzimmers

The text comes from a library? Do you mean you're automatically populating the text property of the TextArea, or are you just copying/pasting from the library into your QML?

Fausto01

@mzimmers Sorry if I didn't explain it well, what I mean is that the text I've inserted in the TextArea is just for a minimal reproducible example. In my code that text comes from a library that populates it dynamically.
Anyway, should the code I've posted work or is TextArea unable to handle images correctly like a browser? The fact that the image is displayed led me to think this should have worked.

mzimmers

It isn't that TextArea isn't able to "handle" Images; you can indeed place images within a TextArea and control their location. The problem is, your image is embedded in the text property of the TextArea. I've never seen this done before, but I think you'd have to use HTML/CSS constructs within the <img> in order to do anything (and I'm not sure this will work).