Blog

Way’s to load image from static resources to VF page

load static resource salesforce
load static resource in salesforce

This post shares the information about how to load image from static resources into your visual force page , in order to load any type of resource into VF page you must have added that file into static resource.

Here I am assuming that you have added your image into static resources .

In my case I have added image into static resources named as bank.

load static resource salesforce

Here are the two simple ways to load this bank image file to your visual force page .

{!$Resource.resourceName} is used access path of static resource . Once you have the resource path then just use that path specific tag.

Way 1 :

Using HTML img tag 

 <img src="{!$Resource.bank}" alt="Bank image"/>

Way 2 :

Using apex:image tag

<apex:image value="{!$Resource.bank}"/>

This is how you can load your image from static resources into the VF page.

If you have any question or concern then feel free to reach us .

Thank u….

How the two ways work

The merge field {!$Resource.bank} returns the URL of the static resource named bank. Way 1 puts that URL into a normal HTML img tag. Way 2 gives it to apex:image, the Visualforce tag for images.

When the resource is a zip file

If you upload a zip with many files, use the URLFOR function to point to one file inside it:

<apex:image url="{!URLFOR($Resource.assets, 'images/bank.png')}" />

Other places where you can use the resource

<!-- CSS -->
<apex:stylesheet value="{!URLFOR($Resource.assets, 'css/style.css')}"/>

<!-- Background image in a style -->
<div style="background-image: url({!$Resource.bank});"></div>

Points to note

  • A static resource name starts with a letter and uses only letters, numbers and underscores.
  • Set the cache control to Public so that browsers can cache the file.
  • In a Lightning web component, import the resource instead: import BANK from '@salesforce/resourceUrl/bank'; and use it as the image source.

FAQ

Why does my image not show?
Check the resource name and spelling, and that the file path inside a zip is correct.

Is apex:image better than img?
Both work. apex:image supports Visualforce attributes, and img is plain HTML.

Leave a Reply