+ Start a Discussion
Charles ThompsonCharles Thompson 

Trailhead: Images do not appear on SLDS "Use Images, Icons, and Avatars"

I am going through the SLDS trail as follows:
Trailhead > Develop for Lightning Experience > Lightning Design System > Use Images, Icons, and Avatars
https://trailhead.salesforce.com/trails/lex_dev/modules/lightning_design_system/units/lightning-design-system5

In the Page Header section, a box is supposed to display an avatar alongside the header text "Accounts / My Accounts".  What I get is a missing image indicator and the brower console gives me a 404 error.

The code in question looks like this:

<img src="{!URLFOR($Asset.SLDS, '/assets/images/avatar1.jpg')}" alt="" />

(along with appropriate spans and divs)   Looking into the Visualforce documentation, I see that the path to assets should be without the leading slash, so the code should look like this:

<img src="{!URLFOR($Asset.SLDS, 'assets/images/avatar1.jpg')}" alt="" />
but that doesn't work, either.

Question:  how do you reference Salesforce assets in this context?

My full code is below.  (This whole module is very difficult to use because the code samples appear all on one (long) line without line breaks, making them very difficult to copy/paste.)
 

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" 
           applyHtmlTag="false" applyBodyTag="false" docType="html-5.0"> 
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en"> 
        <head> 
            <meta charset="utf-8" /> 
            <meta http-equiv="x-ua-compatible" content="ie=edge" /> 
            <title>Salesforce Lightning Design System Trailhead Module</title> 
            <meta name="viewport" content="width=device-width, initial-scale=1" /> 
            <!-- Import the Design System style sheet --> 
            <apex:slds /> 
        </head> 
        <apex:remoteObjects > 
            <apex:remoteObjectModel name="Account" fields="Id,Name,LastModifiedDate"/> 
        </apex:remoteObjects> 
        <body>            
            <!-- REQUIRED SLDS WRAPPER --> 
            <div class="slds-scope"> 
                <!-- MASTHEAD --> 
                <p class="slds-text-heading--label slds-m-bottom--small"> 
                    Salesforce Lightning Design System Trailhead Module 
                </p> 
                <!-- / MASTHEAD --> 
                <!-- PAGE HEADER --> 
                <div class="slds-page-header" role="banner"> 
                    <div class="slds-grid"> 
                        <div class="slds-col slds-has-flexi-truncate"> 
                            <!-- HEADING AREA --> 
                            <div class="slds-media slds-no-space slds-grow"> 
                                <div class="slds-media__figure"> 
                                    <span class="slds-avatar slds-avatar--medium"> 
                                        <img src="{!URLFOR($Asset.SLDS, 'assets/images/avatar1.jpg')}" 
                                             alt="" />
                                    </span> 
                                </div> 
                                <div class="slds-media__body"> 
                                    <p class="slds-text-title--caps slds-line-height--reset">
                                        Accounts
                                    </p> 
                                    <h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" 
                                        title="My Accounts">
                                        My Accounts
                                    </h1> 
                                </div> 
                            </div> 
                            <!-- / HEADING AREA -->
                        </div> 
                        <div class="slds-col slds-no-flex slds-grid slds-align-top"> 
                            <button class="slds-button slds-button--neutral">
                                New Account
                            </button> 
                        </div> 
                    </div> 
                    <div class="slds-grid"> 
                        <div class="slds-col slds-align-bottom slds-p-top--small"> 
                            <p class="slds-text-body--small page-header__info">
                                COUNT items
                            </p> 
                        </div> 
                    </div> 
                </div> 
                <!-- / PAGE HEADER -->                
                <!-- PRIMARY CONTENT WRAPPER --> 
                <div class="myapp"> 
                    <!-- CREATE NEW ACCOUNT --> 
                    <div aria-labelledby="newaccountform"> 
                        <!-- CREATE NEW ACCOUNT FORM --> 
                        <form class="slds-form--stacked" id="add-account-form"> 
                            <!-- BOXED AREA --> 
                            <fieldset class="slds-box slds-theme--default slds-container--small"> 
                                <legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium">
                                    Add a new account
                                </legend> 
                                <div class="slds-form-element"> 
                                    <label class="slds-form-element__label" for="account-name">
                                        Name
                                    </label> 
                                    <div class="slds-form-element__control"> 
                                        <input id="account-name" class="slds-input" type="text" 
                                               placeholder="New account"/> 
                                    </div> 
                                </div> 
                                <button class="slds-button slds-button--brand slds-m-top--medium" type="submit">
                                    Create Account
                                </button> 
                            </fieldset> 
                            <!-- / BOXED AREA --> 
                        </form> 
                        <!-- CREATE NEW ACCOUNT FORM --> 
                    </div> 
                    <!-- / CREATE NEW ACCOUNT -->
                    <!-- ACCOUNT LIST TABLE --> 
                    <div id="account-list" class="slds-p-vertical--medium">
                        
                    </div> 
                    <!-- / ACCOUNT LIST TABLE --> 
                </div> 
                <!-- / PRIMARY CONTENT WRAPPER -->
                
                <!-- FOOTER --> 
                <footer role="contentinfo" class="slds-p-around--large"> 
                    <!-- LAYOUT GRID --> 
                    <div class="slds-grid slds-grid--align-spread"> 
                        <p class="slds-col">Salesforce Lightning Design System Example</p> 
                        <p class="slds-col">&copy; Your Name Here</p> 
                    </div> 
                    <!-- / LAYOUT GRID --> 
                </footer> 
                <!-- / FOOTER -->            
            </div> 
            <!-- / REQUIRED SLDS WRAPPER --> 
            <!-- JAVASCRIPT --> 
            <script> 
            (function() { 
                var account = new SObjectModel.Account(); 
                var outputDiv = document.getElementById('account-list'); 
                var updateOutputDiv = function() { 
                    account.retrieve( { 
                        orderby: [{ LastModifiedDate: 'DESC'}, 
                                  { Name: 'ASC'}
                                 ]//, 
                        //limit: 10 
                    }, function(error, records) { 
                        if (error) { 
                            alert(error.message); 
                        } else { 
                            // create data table 
                            var dataTable = document.createElement('table'); 
                            dataTable.className = 'slds-table slds-table--bordered slds-table--cell-buffer slds-no-row-hover'; 
                            // add header row 
                            var tableHeader = dataTable.createTHead(); 
                            var tableHeaderRow = tableHeader.insertRow(); 
                            var tableHeaderRowCell1 = tableHeaderRow.insertCell(0); 
                            tableHeaderRowCell1.appendChild(document.createTextNode('Account name')); 
                            tableHeaderRowCell1.setAttribute('scope', 'col'); 
                            tableHeaderRowCell1.setAttribute('class', 'slds-text-heading--label'); 
                            var tableHeaderRowCell2 = tableHeaderRow.insertCell(1); 
                            tableHeaderRowCell2.appendChild(document.createTextNode('Account ID')); 
                            tableHeaderRowCell2.setAttribute('scope', 'col'); 
                            tableHeaderRowCell2.setAttribute('class', 'slds-text-heading--label'); 
                            var tableHeaderRowCell3 = tableHeaderRow.insertCell(2); 
                            tableHeaderRowCell3.appendChild(document.createTextNode('Last Mod')); 
                            tableHeaderRowCell3.setAttribute('scope', 'col'); 
                            tableHeaderRowCell3.setAttribute('class', 'slds-text-heading--label'); 
                            // build table body 
                            var tableBody = dataTable.appendChild(document.createElement('tbody')); 
                            var dataRow, dataRowCell1, dataRowCell2, dataRowCell3, recordName, recordId; 
                            records.forEach(function(record) { 
                                dataRow = tableBody.insertRow(); 
                                dataRowCell1 = dataRow.insertCell(0); 
                                recordName = document.createTextNode(record.get('Name')); 
                                dataRowCell1.appendChild(recordName); 
                                dataRowCell2 = dataRow.insertCell(1); 
                                recordId = document.createTextNode(record.get('Id')); 
                                dataRowCell2.appendChild(recordId); 
                                dataRowCell3 = dataRow.insertCell(2); 
                                lastMod = document.createTextNode(record.get('LastModifiedDate')); 
                                dataRowCell3.appendChild(lastMod); 
                            }); 
                            if (outputDiv.firstChild) { 
                                // replace table if it already exists 
                                // see later in tutorial 
                                outputDiv.replaceChild(dataTable, outputDiv.firstChild); 
                            } else { 
                                outputDiv.appendChild(dataTable); 
                            } 
                        } 
                    } ); 
                } 
                updateOutputDiv(); 
            })(); 
            var accountForm = document.getElementById('add-account-form'); 
            var accountNameField = document.getElementById('account-name'); 
            var createAccount = function() { 
                var account = new SObjectModel.Account(); 
                account.create({ Name: accountNameField.value }, 
                               function(error, records) { 
                                   if (error) { 
                                       alert(error.message); 
                                   } else { 
                                       updateOutputDiv(); 
                                       accountNameField.value = ''; 
                                   } 
                               }); 
            } 
            accountForm.addEventListener('submit', 
                                         function(e) { 
                                             e.preventDefault(); 
                                             createAccount(); 
                                         }
                                        );
            </script> 
            <!-- / JAVASCRIPT -->
        </body> 
    </html> 
</apex:page>
Best Answer chosen by Charles Thompson
Alain CabonAlain Cabon
There is an alternative for the version 42.
 
<apex:page>
    <apex:slds />
    <span class="slds-icon_container slds-icon--small slds-icon-standard-account" title="Contact Avatar">
        <img src="/apexpages/slds/latest/assets/images/avatar1.jpg" alt="Contact Avatar" />
    </span>
</apex:page>

Alain
 

All Answers

Alain CabonAlain Cabon
Hi Charles,

There is clearly a regression.

Just change the API version from 42 to 41 then click on "Preview".

Minimal test for a VFP with a image "avatar1" :
<apex:page>
    <apex:slds />
    <span class="slds-icon_container slds-icon--small slds-icon-standard-account" title="Contact Avatar">
        <img src="{!URLFOR($Asset.SLDS, 'assets/images/avatar1.jpg')}" alt="Contact Avatar" />
    </span>
</apex:page>

User-added image

Alain
 
Alain CabonAlain Cabon
There is an alternative for the version 42.
 
<apex:page>
    <apex:slds />
    <span class="slds-icon_container slds-icon--small slds-icon-standard-account" title="Contact Avatar">
        <img src="/apexpages/slds/latest/assets/images/avatar1.jpg" alt="Contact Avatar" />
    </span>
</apex:page>

Alain
 
This was selected as the best answer
Charles ThompsonCharles Thompson
Merci, Alain.

I can't find where this change is documented.  Do you have a link to official documentation?

It's interesting how URLFOR no longer works correctly.  I hope that's fixed in Summer'18.
Glen Starrett 4Glen Starrett 4
Well, it's still broken in the Winter '19 release.  I'm submitting a case, hopefully they will get it fixed.

Thanks to Alain for noting the API version that does work for this example.
yvk431yvk431
It worked when I switched version back to 41. Thanks Alain!!!
ShikibuShikibu
I've submitted a case, and I received a response, but the response was kind of clueless ("please share a screenshot").
Serobanyane MateteSerobanyane Matete
Alain's solution working also in API 47.

 Code Screenshot