Service portal widget - img src not pulling through

[Andrew_TND]

Hello all, I'm doing a project on my PDI and have 1 last thing I'm stuck on is displaying the image from the record to the portal. Can anyone show me where I'm going wrong? (If you follow me on Linkedin, yes its the Pokedex) 😁

The field is an type: Image and value is u_photo.

Thanks in advance!

HTML Template

<div class="pokemon-search-widget">
  <input type="text" ng-model="searchQuery" ng-change="searchPokemon()" placeholder="Search Pokedex..." />
  <ul ng-if="searchResults.length > 0">
    <li ng-repeat="pokemon in searchResults" ng-click="selectPokemon(pokemon)">
      {{pokemon.u_name}} ({{pokemon.u_type_1}}/{{pokemon.u_type_2}})
    </li>
  </ul>
</div>

<div class="pokemon-detail-widget" ng-if="selectedPokemon">
  <div class="detail-left">
    <h1>{{selectedPokemon.u_name}}</h1>
    <p><strong>No: </strong> {{selectedPokemon.u_no}}</p>
    <p><strong>Category: </strong> {{selectedPokemon.u_category}}</p>
    <img src="/api/now/attachment/{{selectedPokemon.sys_id}}" alt="{{selectedPokemon.u_name}}" />
  </div>
  <div class="detail-right">
    <p><strong>Type 1: </strong> {{selectedPokemon.u_type_1}}</p>
    <p><strong>Type 2: </strong> {{selectedPokemon.u_type_2}}</p>
    <p><strong>Description: </strong> {{selectedPokemon.u_description}}</p>
  </div>
</div>

Server Side Script

(function() {
    var gr = new GlideRecord('u_pokemon');
    gr.setLimit(10);
    gr.query();

    data.records = [];

    while (gr.next()) {
        data.records.push({
            sys_id: gr.sys_id.toString(),
            no: gr.u_no.toString(),
            name: gr.u_name.toString(),
            category: gr.u_category.toString(), 
            type_1: gr.u_type_1.toString(),
            type_2: gr.u_type_2.toString(),
            photo: gr.u_photo.toString(),
            description: gr.u_description.toString()
        });
    }
})();

[Sandeep Rajput]

@Andrew_TND Please refer to this article https://www.servicenow.com/community/now-platform-articles/image-attachments-in-widgets-part-3/ta-p/... to know how the image can be rendered in widget.

Hope this helps.

[ChrisBurks · Accepted solution]

Hi @Andrew_TND ,

I see a couple of things here.

1.  In the src attribute for the img tag, the Attachment API is not needed unless the plan is to make this a public page. Usually with displaying images that are attachments simply use the path to the attachment table "sys_attachment" along with the sys_id of the attachment.
2. The sys_id in the script looks to be the sys_id of the custom table "u_pokemon" according to the sample script posted. Look at the first property being set: "sys_id: gr.sys_id.toString()"; gr is the record for "new GlideRecord('u_pokemon')". But what is needed is the sys_id of the attachment which I am assuming is held in gr.u_photo if indeed that field is type "image" and the photo was uploaded to that record.

With the information above the src attribute of the img tag can look like the following:

<img src="/sys_attachment.do?sys_id={{selectedPokemon.u_photo}}" alt="{{selectedPokemon.u_name}}" />

I took your server script and applied it to pulling from the sys_user table since I don't have your custom table. Of course it's modified a little but is basically the same.

Note: The attachment needs to be accessible by the logged in user.

[Andrew_TND]

@ChrisBurks 

You absolute diamond, its comes through as the original size, however nothing a bit of rendering cant solve.

Thank you!