Masking is not avaliable after the QT6 upgrade, this does a kind of primitive masking by placing a rectangle with a circular hole in it over the image.

CURA-9104

resources/qml/Account/AccountWidget.qml

@@ -81,6 +81,7 @@ Item
 
             source: (loggedIn && profile["profile_image_url"]) ? profile["profile_image_url"] : ""
             outlineColor: loggedIn ? UM.Theme.getColor("account_widget_outline_active") : UM.Theme.getColor("lining")
+            maskColor: UM.Theme.getColor("main_window_header_background")
         }
 
         contentItem: Item

resources/qml/Account/AvatarImage.qml

@@ -15,43 +15,44 @@ Item
 
     property alias source: profileImage.source
     property alias outlineColor: profileImageOutline.color
+
+    // This should be set to the color behind the image
+    // It fills the space around a rectangular avatar to make the image under it look circular
+    property alias maskColor: profileImageMask.color
     property bool hasAvatar: source != ""
 
+    Rectangle
+    {
+        id: profileImageBackground
+        anchors.fill: parent
+        radius: width
+        color: "white"
+    }
+
     Image
     {
         id: profileImage
         anchors.fill: parent
         fillMode: Image.PreserveAspectCrop
-        visible: false
+        visible: hasAvatar
         mipmap: true
     }
 
-    Rectangle
+    UM.ColorImage
     {
+        // This image is a rectangle with a hole in the middle.
+        // Since we don't have access to proper masking in QT6 yet this is used as a primitive masking replacement
         id: profileImageMask
         anchors.fill: parent
-        radius: width
+        source: UM.Theme.getIcon("CircleMask")
-        color: hasAvatar ? "white" : "transparent"
     }
 
-    /*
-    TODO: Reimplement this without OpacityMask.
-    OpacityMask
-    {
-        anchors.fill: parent
-        source: profileImage
-        maskSource: profileImageMask
-        visible: hasAvatar
-        cached: true
-    }*/
-
     UM.ColorImage
     {
+        // This creates the circle outline around the image
         id: profileImageOutline
-        anchors.centerIn: parent
+        anchors.fill: parent
-        // Make it a bit bigger than it has to, otherwise it sometimes shows a white border.
+        anchors.margins: .25
-        width: parent.width + 2
-        height: parent.height + 2
         visible: hasAvatar
         source: UM.Theme.getIcon("CircleOutline")
         color: UM.Theme.getColor("account_widget_outline_active")

resources/qml/Account/UserOperations.qml

@@ -30,6 +30,7 @@ Column
             height: UM.Theme.getSize("main_window_header").height
 
             source: profile["profile_image_url"] ? profile["profile_image_url"] : ""
+            maskColor: UM.Theme.getColor("main_background")
             outlineColor: UM.Theme.getColor("main_background")
         }
         Rectangle

resources/themes/cura-light/icons/default/CircleMask.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path d="M 0 0. L 0 16 L 16 16 L 16.101562 0 L 8 0 A 8 8 0 0 1 16 8 A 8 8 0 0 1 8 16 A 8 8 0 0 1 0 8 A 8 8 0 0 1 8 0 L 0 0 z " />
+</svg>

resources/themes/cura-light/icons/default/CircleOutline.svg

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <svg width="50" height="50">
-    <circle cx="25" cy="25" r="23.74" stroke-width="2.5" />
+    <circle cx="25" cy="25" r="23.74" fill="none" stroke="black" stroke-width="2.5" />
 </svg>