function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
The new LearnerThe new Learner 

how to call static resource image from Html in salesforce

Hi Experts,

I have requirment in that i am preparing an page , mostly i used html but here issue is that i used an image from my system but its not working for other users so i am looking for alternative soluation so i thought  to call an image from static resource but i am not sure how to call from my html page or else in CSS also fine for me . kindly help me out. below is the code which i called in my html page.


 <header>
 <br></br>
   <img src="D:\Users\Logo-without-Tagline_Black.png"   style="width:100%;height:250px;"/>
    </header>
Kindly help me out.

Thanks in advance
Best Answer chosen by The new Learner
Yogeshwar TailorYogeshwar Tailor
Hi The new Learner,

As seethal said that was correct.
You can use static resource these types on visualforce page.
 
<apex:image url="{!$Resource.logo}"/>
  
<img src="{!$Resource.logo}"/>

But as you are saying the html form is in your local drive then you have to use the public static image url. You can configure site to access that static resource public.
The static resource URL will be like that :-  https://yogeshtailor-developer-edition.ap5.force.com/resource/1504896311011/logo

<img src="https://yogeshtailor-developer-edition.ap5.force.com/resource/1504896311011/logo" />

Thanks,
Yogesh
 

All Answers

jane1234jane1234
YOU CAN USE
<apex:image url="{!$Resource.TestImage}" width="50" height="50"/>

OR 
<img src="{!URLFOR(!$STATICRESOUCE)}"/
The new LearnerThe new Learner
HI seethal,

I havent used any apex tag in my html page.
here "(!$STATICRESOUCE)}"/" do i need to paste image name over here i mean in staticresource. how kindly me help me out. my image name is logo in static resource.

Thanks,
jane1234jane1234
you must create the static resource of image in salesforcewith any name you want 
and paste the staticresource name in that
The new LearnerThe new Learner
Hi Seethal,

I have tried as  you said like below. but its not working.

<header>
 <br></br>
   <img src="{!URLFOR(!$Shure_Logo)}"   style="width:100%;height:250px;"/>
    </header>
jane1234jane1234
<img src="{!$Resource.Shure_Logo}"   style="width:100%;height:250px;"/>
AND ENSURE THAT THE STATIC RESOURCE IS PUBLIC
The new LearnerThe new Learner
Same issue, actually i am created web to lead form so that html is in my local drive.
jane1234jane1234
CAN YOU PUT SCREEN SHOT??? OF THE RESULT YOU ARE GETTING
 
The new LearnerThe new Learner
above is the image whcih i am gettingUser-added image
Yogeshwar TailorYogeshwar Tailor
Hi The new Learner,

As seethal said that was correct.
You can use static resource these types on visualforce page.
 
<apex:image url="{!$Resource.logo}"/>
  
<img src="{!$Resource.logo}"/>

But as you are saying the html form is in your local drive then you have to use the public static image url. You can configure site to access that static resource public.
The static resource URL will be like that :-  https://yogeshtailor-developer-edition.ap5.force.com/resource/1504896311011/logo

<img src="https://yogeshtailor-developer-edition.ap5.force.com/resource/1504896311011/logo" />

Thanks,
Yogesh
 
This was selected as the best answer
The new LearnerThe new Learner
HI Yogeshwar,

Can you help me out , how to configure the public static image url please.

Thanks
Yogeshwar TailorYogeshwar Tailor
Hi ,

Have you created site for that? If not go to site and create new site and activate it. 

Then goto Static Resource -> View 

URL will be Like that : https://yogeshtailor-developer-edition.ap5.force.com/resource/1504896311011/logo

Copy the Address bar URL and paste it in <img src="URL"> .

User-added image


User-added image


Thanks,
Yogesh
Lightningworld RocksLightningworld Rocks
Here is what you can use to access the Static resource in HTML editor of Communities, using relative path will reduce the complete URL hard code. 

<img src="/sfsites/c/resource/<static resource name>"> 

Thanks
Deva
Gary RalstonGary Ralston
Hey The new Learner,

To call a static resource image from HTML in Salesforce, you need to use the following format : 
<img src="{!URLFOR($Resource.ResourceName, 'ImageName.extension')}" />
Replace ResourceName with the name of your static resource, and ImageName.extension with the name of your image file (e.g. "logo.png").

Discover more about static resources by visiting https://arrify.com/static-resources-in-salesforce/. This article provides a comprehensive guide to managing static resources in Salesforce, including Visualforce pages, Apex classes, Lightning Web Components, and Aura Components.