0

So I am trying to create an ICT risk share list with SP online. The main requirement is adding the below image to the list for user information. So every time users create a new record, they can refer to this image to fill the form. With SP on-prem, we could add the new web part and use the content editor web part to add the image. I did some search, and I found the below code for adding a photo. However not sure how I can use "src" here to point to the image saved in the SP picture library.

can you please help.

{
"elmType": "img",
"style": {
"width": "100px"
},
"attributes": {
"src": "@currentField"
}

Image:

enter image description here

enter image description here

2 Answers 2

0

In SharePoint online modern experience, to show image on list form >> You have to configure the header section of list form using JSON formatting.

Use below JSON code in header section of list form:

{
  "elmType": "img",
  "style": {
    "width": "100%",
    "max-width": "100%"
  },
  "attributes": {
    "src": "https://<tenant>.sharepoint.com/sites/siteName/LibraryName/MyImage.png"
  }
}

In src attribute, pass the complete URL of your image stored in SharePoint library.

You can also use the @currentWeb token to dynamically refer the absolute URL of your current site like:

{
  "elmType": "img",
  "style": {
    "width": "100%",
    "max-width": "100%"
  },
  "attributes": {
    "src": "= @currentWeb + '/LibraryName/MyImage.png'"
  }
}

Documentation: Configure the list form

5
  • Thanks for your message, can you also help me with how we can have two header at the same time, for instance the image that you show me and I have another one which create a blue bar on the top.
    – Harris
    Aug 4, 2021 at 5:42
  • { "debugMode": true, "elmType": "div", "txtContent": "ICT Risk Assessment list", "style": { "height": "40px", "font-size": "18px", "font-weight": "600", "padding": "10px", "color": "#fff", "background-color": "#383794" } } }
    – Harris
    Aug 4, 2021 at 5:42
  • Sure, what I need is to show the image every time the users open the new form. (you answered this and thank you). Also after the image I want to have a bar with a blue color and an icon with the list name
    – Harris
    Aug 4, 2021 at 6:15
  • I understood your new requirements now. But please Ask a new question for this. So that it will be easier to track it separately & answer more specific/precisely by adding the JSON code in answer with explanation. Aug 4, 2021 at 6:51
0

It looks like you're missing a final curly brace on the end.

By adding the curly brace, your JSON code worked fine for me:

{ "elmType": "img", "style": { "width": "100px" }, "attributes": { "src": "@currentField" }}

Once saved, SharePoint adjusted the JSON to this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "img",
  "style": {
    "width": "100px"
  },
  "attributes": {
    "src": "@currentField"
  }
}

EDIT:

This is based on the assumption that it is applied to the "Picture" column in your list and the URL for "Picture" is pointing to the required image.

If you just want to use the same image every time, you can simply replace @currentField with the URL to the image and you can then leave the column metadata empty.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.