SP form header add Logo

[SG523]

@Don Kirkham 

I am having trouble adding a logo to my form header with Json. I have the image saved to my SP site assets folder as a png file. When I tired to add it all I got was a broken image. Here is my current Json without logo and I would like to add the logo to the left side of everything.

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "15px",
        "background-color": "RGBA(0,95,131,1)"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "tagsolid",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "10px",
                        "height": "40px",
                        "color": "white"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden",
                "color": "white"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "=if([$Title]=='','New','Reject Tag Database - Tag #' + [$Title])"
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "right",
                "padding": "21px 12px",
                "overflow": "hidden",
                "color": "white"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "=if([$Quantity]=='','','Closed : ')"
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "left"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "=if([$Quantity]=='','',if([$Quantity]-([$QuantityScrap]+[$QuantityRework]+[$QuantityRTV]+[$QuantityReturnedtoUse])==0,'BoxMultiplySolid','BoxCheckmarkSolid'))",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "10px",
                        "height": "40px",
                        "color": "=if([$Quantity]-([$QuantityScrap]+[$QuantityRework]+[$QuantityRTV]+[$QuantityReturnedtoUse])==0,'Red','Green'"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "right",
                "padding": "21px 12px",
                "overflow": "hidden",
                "color": "white"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "=if([$PartNumber]=='','','Part Number : '+[$PartNumber])"
                },
                {
                    "elmType": "div",
                    "txtContent": "=if([$Quantity]=='','','Tag Quantity : '+[$Quantity])"
                }
            ]
        }
    ]
}

Thanks

[#2]

@SG523 The following example should get you started. Insert the following code after line 16 in your JSON above.

    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "box-sizing": "border-box",
        "align-items": "center"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "https://<tenant>.sharepoint.com/sites/lf/siteassets/logo.png",
            "title": "Logo"
          },
          "style": {
            "flex": "none",
            "padding": "0px",
            "padding-left": "10px",
            "height": "80px",
            "color": "white"
          }
        }
      ]
    },

This just adds another div to the left of your existing header row and inserts an image.  Change line 12 to reflect the full url to your image. Good luck!

Please click Mark as Best Response & Like if my post helped you to answer or resolve 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.

[#3]

@Don Kirkham 

That is close but it still gives me a broken image instead of the logo. I got the logo from address right from the address bar while viewing the full image. I also tried sharing the image and using the link from sharing. Neither worked. How can I go about fixing this issue, I think it might be a permissions issue or something like that?

Thanks

[#4 · Accepted solution]

@SG523 If you have stored the image in same site, you can use the relative URL of image like: 

"src": "=@currentWeb + '/SiteAssets/MyImage.jpg'"

OR copy the image URL as shown in below image & use it: 

---

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.

[#5]

Thank you both so much! This has solved my problem. I used the second method of getting the path to make mine work!