0

I have a contact list created in SharePoint Online.

My list has a column called "Picture URL".

The "Picture URL" column is formatted as "Single line of Text".

I have formatted the "Picture URL" column with:

{
   "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
   "elmType": "div",
   "children": [
     {
       "elmType": "img",
       "attributes": {
         "src": "@currentField",
         "title": "=if(@currentField == '', 'No picture available', @currentField)"
       },
       "style": {
         "position": "relative",
         "top": "50%",
         "left": "50%",
         "width": "48px",
         "height": "auto",
         "margin-left": "-50%",
         "margin-top": "0%"
       }
     }
   ]
}

This in the hope that the URL will show as a thumbnail picture.

But all I see is a black square with a White Cross.

6
  • 1
    Try inspecting the image element generated using this json and check its src attribute. It is correct or not? Commented Aug 6, 2019 at 18:28
  • There is nothing wrong with this JSON. probably the image URL is wrong Commented Aug 6, 2019 at 18:32
  • Checked the image url..... opened the jpg and copied with url...... everything is correct on the URL Commented Aug 6, 2019 at 19:06
  • Not sure how to check the src attribute Commented Aug 6, 2019 at 19:07
  • Where is the image stored? In a SharePoint library? Elsewhere on the web? Like Denis said, your JSON works. I just tested it. So it must be a URL issue or permissions issue. To check the rendered URL: Press F12 to open the browser's developer tools, click the tab named Inspector or DOM Explorer, click the "select element" tool (usually an arrow), then click your image black square. In the tool pane you will then see the generated HTML. Note the "src" attribute in the img tag and see if is correct. (Copy it and test in a browser.) Commented Aug 6, 2019 at 19:58

1 Answer 1

0

Your json format is fine, you need set the field value point to a image.

For example:

Set Picture URL as image relative url.

/sites/lee/siteassets/panda.jpg

or

https://d2ouvy59p0dg6k.cloudfront.net/img/web_105346_358521.jpg

enter image description here

6
  • Thanks I can get your Panda to disply but not my image. Commented Aug 7, 2019 at 7:43
  • Here is the full link to the jpg, which maybe needs to be corrected with backslashes etc Commented Aug 7, 2019 at 7:44
  • /sites/SRO-992/pac/SiteAssets/Forms/AllItems.aspx?id=%2Fsites%2FSRO%2D100%2Fpac%2FSiteAssets%2FSitePages%2FStaff%20Photos%2Fdarren%2Ejpg Commented Aug 7, 2019 at 7:45
  • The link is not an image url actually, it'll render if you view from browser is because of SharePoint has logic to process it, an image url should point to a image directly.
    – Lee
    Commented Aug 7, 2019 at 8:08
  • Is this better: Commented Aug 7, 2019 at 8:29

Your Answer

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

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