2

I'm getting a 404 error when accessing any LDS assets. Am I doing something wrong? The code I'm using is taken right from the Using the Lightning Design System page within the Visualforce Developer Guide. Here is the full code for my Visualforce page:

<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" />
        <apex:slds />
    </head>
    <body>
        <div class="slds-scope">
            <span class="slds-icon_container slds-icon--small slds-icon-standard-account" title="Account Standard Icon">
                <img src="{!URLFOR($Asset.SLDS, 'assets/icons/standard/account_60.png')}" alt="Account Standard Icon" />
            </span>
        </div>
    </body>
    </html>
</apex:page>

To clarify, the 404 is specifically for the image.

Other image paths tried are:

assets/images/avatar1.jpg
images/avatar1.jpg
avatar1.jpg

Interestingly, when the image path starts with 'assets/', the 404 error indicates it is being removed from the path when the page is rendered:

enter image description here

1 Answer 1

4

You can use the Lightning Assets path:

<img src="/apexpages/slds/latest/assets/icons/standard/account_60.png" alt="Account Standard Icon" />

Or, given that you've gone through all the trouble to use SVG:

<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" />
        </head>
        <body>
            <apex:slds />
            <div class="slds-scope">
                <span class="slds-icon_container slds-icon-standard-account" title="Description of icon when needed">
                    <svg class="slds-icon slds-page-header__icon" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#account" />
                    </svg>
                </span>
            </div>
        </body>
    </html>
</apex:page>
4
  • 1
    That worked. Is it supported by Salesforce? I'm a bit concerned because it seems all the docs I've seen tell me to use URLFOR with $Asset.SLDS and that doesn't actually work apparently. Mar 11, 2018 at 21:10
  • @SfdcHawkeye I don't know of any "official" documentation, but it seems to be all over the place. If I find an official resource, I'll let you know.
    – sfdcfox
    Mar 11, 2018 at 21:18
  • My image didn't show op, but it worked with your solution. Should we just always use the Lightning Assets path?
    – tak971
    Jun 25, 2020 at 11:32
  • @tak971 That's recommended for Visualforce, yes.
    – sfdcfox
    Jun 25, 2020 at 14:03

Not the answer you're looking for? Browse other questions tagged or ask your own question.