Apex Code Development You need to sign in to do that
Don't have an account?
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">© 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>
<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
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>Alain
<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
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.
Thanks to Alain for noting the API version that does work for this example.
check my blog (https://www.eleganceblog.com/couple-tattoos-ideas/)