In SharePoint Online modern experience, you can add an image to the list form by applying JSON formatting to the Header section like this:
{
"elmType": "img",
"style": {
"width": "100%",
"max-width": "100%",
"float": "left"
},
"attributes": {
"src": "=@currentWeb + '/SiteAssets/Microsoft products banner.jpg'"
}
}
Output:

Documentation:
Configure the list form
Examples:
The following examples may assist in understanding how the formatting behaves in the header.
Example 01
Without adding display: block
to the parent, the parent will have flex
applied, children will display inline.
{
"elmType": "div",
"children":
[
{
"elmType": "div",
"txtContent": "Line 01.\n\n"
},
{
"elmType": "div",
"txtContent": "Line 02.\n\n"
},
{
"elmType": "img",
"attributes":
{
"src": "https://picsum.photos/600/300"
}
}
]
}
will produce:

Example 02
When adding display: block
to the parent, the parent will not have flex
applied, children will display as blocks.
{
"elmType": "div",
"style":
{
"display": "block"
},
"children":
[
{
"elmType": "div",
"txtContent": "Line 01.\n\n"
},
{
"elmType": "div",
"txtContent": "Line 02.\n\n"
},
{
"elmType": "img",
"attributes":
{
"src": "https://picsum.photos/600/300"
}
}
]
}
will produce:

Example 03
If you want to modify the sample header that is provided by Microsoft so that is has some text and an image below it, you could try something like this:
{
"elmType": "div",
"style":
{
"display": "block",
"width": "99%",
"border-top-width": "0px",
"border-bottom-width": "1px",
"border-left-width": "0px",
"border-right-width": "0px",
"border-style": "solid",
"margin-bottom": "16px",
"padding-bottom": "20px"
},
"children":
[
{
"elmType": "div",
"attributes":
{
"class": "ms-borderColor-neutralTertiary"
},
"style":
{
"display": "flex"
},
"children":
[
{
"elmType": "div",
"style":
{
"display": "flex",
"box-sizing": "border-box",
"align-items": "center"
},
"children":
[
{
"elmType": "div",
"attributes":
{
"iconName": "EditContact",
"class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
"title": "Details"
},
"style":
{
"flex": "none",
"padding": "0px",
"padding-left": "0px",
"height": "36px"
}
}
]
},
{
"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"
},
"children":
[
{
"elmType": "div",
"txtContent": "My Header Title"
}
]
}
]
},
{
"elmType": "div",
"txtContent": "Line 01.\n\n"
},
{
"elmType": "div",
"txtContent": "Line 02.\n\n"
},
{
"elmType": "img",
"attributes":
{
"src": "https://picsum.photos/600/300"
}
}
]
}
will produce:
