How to make profile pictures visible in a list (people picker field)?

beachhead75 

I've modified this so that the image is left justified and smaller to better align with the out-of-the-box option.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "inlineEditField": "@currentField",
  "style": {
    "flex-direction": "column",
    "align-items": "flex-start",
    "margin-top": "6px",
    "padding-right": "8px",
    "width": "100%",
    "overflow": "hidden"
  },
  "children": [
    {
      "forEach": "personIterator in @currentField",
      "elmType": "div",
      "attributes": {
        "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary"
      },
      "style": {
        "display": "inline-flex",
        "align-items": "center",
        "height": "25px",
        "overflow": "hidden",
        "border-radius": "50px",
        "margin": "2px"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$personIterator.email]",
            "title": "[$personIterator.title]"
          },
          "style": {
            "width": "25px",
            "height": "25px",
            "display": "block",
            "border-radius": "50%",
            "margin": "0px"
          }
        },
        {
          "elmType": "div",
          "txtContent": "[$personIterator.title]",
          "style": {
            "font-weight": "normal",
            "font-size": "12px",
            "margin": "0px 10px 0px 5px"
          }
        }
      ],
      "defaultHoverField": "[$personIterator]"
    }
  ]
}

Thank you beachhead75 ! Looks beautiful!

Toby McDaid bbsin No need to use JSON to show profile photos of users in person or group columns. You can now enable "Show profile photos" from column settings:

Check this blog by ChandaniPrajapati: How to show profile picture in Person column in SharePoint list/library? 

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

bbsin   In case you still need it, you need to add 

=@currentWeb + before the photo image path, so:

"src": "=@currentWeb + '/_layouts/15/userphoto.aspx?size=S&accountname=' + [$personIterator.email]",