Display images from custom table to Portal

[brittanyg_]

I have a requirement to create a request that will allow users to browse the inventory of artwork (stored in a custome table) and select one item of interest for a giveaway.

I crated a reference type variable that points to the custom table, which includes an image (u_thumbnail - column in table) of the artwork. I updated the variable attributes to include the 'u_thumbnail' field. However when I try to view in the portal the image doesn't render, the column seems to be blank. The table includes several hundred pictures of items.

Is there a way to show images that are stored on a custom table on the portal? Users must be able to see pictures of the artwork to know what they are selecting.

[Dagan]

Hi Brittany, 

I am currently working on a project that involves doing just this, and if you are still having issues, I'd like to offer my help. 

If I understand correctly, there's a custom table with an attachment field 'u_thumbnail' and we need to display it on portal. 

First and foremost, we have our attachment field that is populated (logo in this my case, but I've altered the code to use 'u_thumbnail' instead )

On the widget inside the Server Script, we will be using an object to push to results that populate the data object. 

data.records = getRecords();

function getRecords(){
//query your custom table
var gr= new GlideRecord('u_custom_table');
//conditions
//...
//...
gr.query();

//results array to store each object
var results = [];

        while (gr.next()) {
            var resultsObj = {};
            resultsObj.thumbnail= gr.getDisplayValue('u_thumbnail');
            //other object properties
            //... 

            //push the populated obj into the array
            results.push(resultsObj);
}
        return results;
    }

Once we are pulling the image, it needs to be displayed. In the HTML it is as simple as this, but do make sure to add formatting afterwards:

<div ng-repeat="c in c.data.records">                     
    <img src="{{c.thumbnail}}" alt="thumbnail"/>             
</div>

And that should be it! Let me know if this works for you or not!