Forum Discussion

lidordayan's avatar
lidordayan
Copper Contributor
Jan 31, 2024
Solved

Image column format,

Hi all.

I have a format for the Image column and it is worked great until last week.

 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "customRowAction": {
    "action": "defaultClick"
  },
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "@currentField.serverRelativeUrl"
      },
      "style": {
        "width": "100px",
        "cursor": "pointer"
      }
    }
  ]

 

 

 

the picture that I add to the new item in the list does not appear in default view like the rest and I have only 65 Items.

 

And when I'm removing the format it is working but without the function that I need the format for.

 

thank you for your help.

  • lidordayan src attribute should be something like this: 

     

    "src": "=if([$Image.serverRelativeUrl],[$Image.serverRelativeUrl],@currentWeb+'/Lists/**YOUR-LIST-NAME**/Attachments/'+[$ID]+'/'+[$Image.fileName])"

     

    Where Image is the internal name of your SharePoint image column. Also, make sure to edit the above JSON and replace the **YOUR-LIST-NAME** placeholder with your list’s name, as it appears in the list URL (including special characters).


    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.

9 Replies

  • spitch17's avatar
    spitch17
    Copper Contributor

    lidordayan If you are not otherwise using attachments, you can go into Advanced List Settings and disable attachments. Then new image uploads will be saved back into the Site Assets folder and your original code will work again.
    Note that disabling attachments will delete any new images, so make sure you have a copy locally so you can re-upload.

  • lidordayan src attribute should be something like this: 

     

    "src": "=if([$Image.serverRelativeUrl],[$Image.serverRelativeUrl],@currentWeb+'/Lists/**YOUR-LIST-NAME**/Attachments/'+[$ID]+'/'+[$Image.fileName])"

     

    Where Image is the internal name of your SharePoint image column. Also, make sure to edit the above JSON and replace the **YOUR-LIST-NAME** placeholder with your list’s name, as it appears in the list URL (including special characters).


    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.

    • Notnebs's avatar
      Notnebs
      Copper Contributor

      Hi ganeshsanap ,
      I tried your solution but the [$ID] is not getting passed to the browser.
      URL looks like this "Attachments//Reserved_ImageAttachment_"

      Any help appreciated 🙂

      • Notnebs Where are you applying this JSON format exactly, column or view or form formatting?

         

        Can you add the complete JSON formatting code you are using to your reply/response? Also attach the screenshots of where you are applying the JSON if possible to understand the issue easily.


        Please consider giving a Like if my post helped you in any way.

  • lidordayan 

     

    With the recent updates to SharePoint Online and Microsoft Lists, if the attachments option is enabled in your list, images will be stored in same SharePoint list instead of storing in site assets library - and it does not return the correct value in "serverRelativeUrl" attribute. 

     

    Check more details at: SharePoint Online: All you need to know about New Image column type 

     

    You will have to adjust your src attribute value accordingly. Check the JSON given in this article which will give you some ideas about it: Download Image from SharePoint Image column using JSON formatting 


    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.

Resources