Sign Up ›
  • Glen Starrett 4
  • NEWBIE
  • 5 Points
  • Member since 2018
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies
SOLVED
8 replies

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>