Displaying an image submitted to a SharePoint list

Question

I have a requirement from a user that when they submit the spec of a laptop or printer to a SharePoint list that the details are displayed on a separate page. I'm working on getting the text details to show, but part of the requirements is that the user can upload a picture of the kit which would then display.

I thought using an InfoPath form then creating a data view to the list, but that only shows the file name and not the actual image. Any ideas?

Is that picture is a list attachment? Are you displaying text on a custom page? — Venkat Konjeti, May 23 '17 at 13:41
Yes the picture is a list attachment brought in by an InfoPath form and yes it's on a custom page — Dazza, May 23 '17 at 14:46

score 9 · Answer 1 · answered May 23 '17 at 15:21

You can do couple of steps

Get list attchment using following rest query

siteurl/_api/web/Lists/getByTitle('list tiel')/Items(listitemid)/AttachmentFiles
get the attachment file path from the results. Example

var imgPath = data.d.results[0].ServerRelativeUrl
Bind the file path to the html img control

<div><img id="imgProduct" /></div>

$("#imgProduct").attr(src, imgPath);

Isa · Answer 2 · 2017-06-23T16:52:27.530

The REST solution is probably the most elegant. But an alternative is to write a script and use a content editor webpart to attach a script to solve the issue by client side rendering. An example is shown below (I modified some things from an older script I had and have not tested it, so I am pretty sure you will need to do some testing and tweaking to make it work):

_spBodyOnLoadFunctionNames.push("imgshow");

// Function Name:       getElementsByContains
// Function Purpose:    Returns array of all DOM elements with any value in the array passed into within the elements of a certain tag

function getElementsByContains(val, tag) {
    var i;
    const getElementsByContains = [];
    const allElements = document.getElementsByTagName(tag);
    for (let key in allElements) {
        if (isNumeric(key)) {
            if(allElements.hasOwnProperty(key)) {
                const element = allElements[key];
                if(element.innerHTML != undefined) {
                    if(Array.isArray(val)) {
                        for(i = 0; i < val.length; i++) {
                            if(element.innerHTML.search(val[i]) != -1) {
                                getElementsByContains.push(element);
                                break;
                            }
                        }
                    } else {
                        if(element.innerHTML.search(val) != -1) {
                            getElementsByContains.push(element);
                        }
                    }
                }        
            }
        }
    }
    return getElementsByContains;
}

// Function Name:       imgshow
// Function Purpose:    Show imgs displayed as text

function imgshow() {
    var planLink;
    var arrCalCol = getElementsByContains(["&lt;img", "<img"], "td"); //Can be td or anything, look in your DOM
    debugger;
    for (i=0; i < arrCalCol.length; i++) {
        if (arrCalCol[i].innerHTML.search("&lt;img") != -1 || arrCalCol[i].innerHTML.search("<img") != -1) {
            var planLink = arrCalCol[i];
            var pic = document.createElement("img");

            pic.src = "____________" //Add what you need to extract the attributes from the img string including the src field, then dump your tag attributes here other than src and etc. before the element gets amended/appended.
            pic.style = "height:35px; width:35px";

            planLink.innerHTML = "";

            if (planLink) {
                planLink.appendChild(pic);
            }
        }
    }
}

score 2 · Answer 3 · answered May 23 '17 at 14:17

2

Create one calculated field and assign your image URL with the following equation in calculated field,

="<div><img src=[URLField or URL]</div>"

for more details visit this and this

answered May 23 '17 at 14:17

SynozeN Technologies

1,199
12
25

Will this work on SharePoint Online? – SharePointer May 23 '17 at 14:48
Cheers, though it's not what I really need. I need the image to display on a page not a list. – Dazza May 23 '17 at 14:54
1

This no longer works. I think MS changed it this June just a week ago. – Isa Jun 18 '17 at 08:57
1

Yes, @lsa, As per https://support.microsoft.com/en-gb/help/4032106/handling-html-markup-in-sharepoint-calculated-fields, Calculated field is no more supported.so this will not work for SharePoint online. – SynozeN Technologies Jun 19 '17 at 05:52

score 1 · Answer 4 · answered Jun 16 '17 at 20:30

If the image is uploaded to a seperate library and lookup column can be used to connect the image to the kit. On the seperate page you can use the content query webpart with the [PageQueryString] attribute within the filter of it. Then all your information can be showed on one page with help of the content query webpart. Or you can even redesign the dispform page of the kit list and add the content query webpart there with a reference of [pagefieldvalue:id] connected to the lookup column of the image.

Displaying an image submitted to a SharePoint list

4 Answers4