I’m using SharePoint JSON view formatting to customize the display of a list item. My goal is to center the title text and display an image above to it. However, I’m encountering two issues:

The title text disappears when I try to center it.
The image is not displaying correctly; it looks like a broken image in the formatted view.

My List consists of:
Title (textcolom)
Icon (Image colom)
Lien (Hyperlink colom)
Couleur (text colom where i put the code of the color)

Here is the JSON code I’m using:

{
“$schema”: “https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json”,
“hideSelection”: true,
“hideColumnHeader”: true,
“rowFormatter”: {
“elmType”: “a”,
“attributes”: {
“href”: “=if([$Lien]==”,”,[$Lien])”
},
“style”: {
“text-decoration”: “none”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-wrap”: “wrap”,
“align-items”: “stretch”,
“flex-direction”: “row”,
“padding”: “0px”,
“margin”: “8px”,
“max-width”: “120px”,
“border-radius”: “8px”,
“background-color”: “[$Couleur]”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“flex-grow”: “1”,
“display”: “flex”,
“flex-direction”: “column”,
“flex-wrap”: “nowrap”,
“align-items”: “center”, // changed from left to center
“max-width”: “500px”,
“min-width”: “450px”,
“padding-left”: “10px”
},
“children”: [
{
“elmType”: “img”,
“style”: {
“width”: “50px”,
“height”: “50px”,
“padding-top”: “10px”,
“cursor”: “pointer”,
“display”: “=if([$Icone]==”,’none’,”)”
},
“attributes”: {
“src”: “=[$Icone]”
}
},
{
“elmType”: “a”,
“attributes”: {
“href”: “=if([$Lien]==”,”,[$Lien])”
},
“style”: {
“display”: “block”,
“font-size”: “13px”,
“font-weight”: “500”,
“padding-bottom”: “10px”,
“padding-top”: “10px”,
“text-decoration”: “none”,
“cursor”: “pointer”,
“color”: “white”,
“text-align”: “center”,
“width”: “100%” // ensures the text takes up full width of its container
},
“txtContent”: “=[$Title]”
}
]
}
]
}
]
}
}

I hope the title to be in the middle below a working image: like this image: