Working around the limitations of the SharePoint picture column in PowerApps forms

Recently I was playing around with the PowerApps form in SharePoint on a list that contained an image column. You might have found out that at this moment the image column is read only within PowerApps canvas apps. You can show the image from the picture column but you cannot update it. In case of a PowerApps form you still have the possibility to update the column using the Quick edit option or the details pane, but you probably switched off that option because when you use PowerApps chances are you added some logic to the editing of the fields that users can bypass using Quick edit or updating in the details pane. So lets assume those options are of the table.

As you can see in the above image  the picture from the picture column shows up beautifully both on the view and edit form. How to work around this view only limitation?

What does not work

Switching the corresponding card on the form to a different layout

A picture column card has two layout options View Image and View text. When you select View text the field in the data card only shows a complex url that gets you nowhere. This complex url is the only text information the column will give you.

Use patch on a picture column

Bypassing the form and using patch to update the column will only result in an error stating that this column is read only.

Use Flow

Maybe use Flow to update the column? It is always a good idea to have a look at Flow if updating the data directly from PowerApps is not working, but in this case no solution there either. The update item action of the SharePoint connector will not show the picture column for updating.

Bottom line: as long as the column is of type picture column the column is view online in your PowerApps form.

What does work

The way to handle pictures inside your list that you want to show up in your PowerApps form and view in your list is by using a Hyperlink column instead.

When you edit the settings of your picture column you can change the type of the column to Hyperlink. 
The column in your list will now show the URL of the picture.

When you go to your form in the PowerApps designer the form still sees this column as a picture column. My findings are that you need to remove and add your list as a data source before the column type is updated. At this point the card is still shown as a picture column.

When you remove the field from the form and add it again the card is properly changed to a hyperlink card. Since a hyperlink can be edited through PowerApps you now have an edit layout option for the card. 

PowerApps can show images based on a URL. So the content of the Hyperlink column can be used to show the picture similar to when the column was a picture column. You can add an image control to the hyperlink card that shows the image based on the contents of the card field. 

Now when you update the hyperlink field the image will change too. And the updated hyperlink value can be saved to the list. 

Still one problem to solve: how to show the picture in the SharePoint list view. The answer to this is: SharePoint Column formatting. Add the JSON below to the Format column field of your hyperlink column and a picture is shown instead of a url.

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "50px",
        "height": "50px",
        "overflow": "hidden"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "@currentField"
          },
          "style": {
            "position": "relative",
            "width": "100%",
            "height": "auto"
          }
        }
      ]
    }
  ]
}

The end result: a list with a column showing a picture that can be updated using the PowerApps form.