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
Lavanya Gottumukkala 8Lavanya Gottumukkala 8 

How to display an image in a vf page using bootstrap?

Hi All,

Please see my below VF page code.

<apex:page docType="html-5.0" applyhtmlTag="false" standardStylesheets="false" cache="false" showHeader="false">
  <html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">          
  <img src="img_chania.jpg" alt="Chania" width="460" height="345"/> 
</div>

</body>
</html>

</apex:page>

I am using Bootstrap and not able to get the image on the VF page.Is there any thing to include in the vf page?Can any one help me.I am new to Bootstrap.

Thanks in advance
ManojSankaranManojSankaran
Hi Lavanya,

You have to use a relative url to display the image in VF Page

First you have to create a static resource and add the image there
Then you can use the link in the VF Page.

Below is the example

<img src="https://c.ap1.visual.force.com/resource/1386163404000/imagePic" alt="Chania" width="460" height="345"/> 

 Creating static resource. Click the view file link and get the url of the image file. Add that to your image tag.


Mark it as answer if it solves your problem.
Thanks
Manoj S
User-added image
RatanRatan
issue with bootstrap or image? Do you want to display image if yes then where is your image stored ?
mritzimritzi
Code: 
<apex:page docType="html-5.0" applyhtmlTag="false" standardStylesheets="false" cache="false" showHeader="false">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div class="container">
          <!-- replace imageFileName with the file name of image stored as "Static Resource"  -->
          <!-- If you are sourcing image from web, you can then use normal "img" tag -->          
          <apex:image value="{!$Resource.imageFileName}" styleClass="img-responsive" alt="Chania" width="460" height="345"/> 
        </div>
        
    </body>
</apex:page>
Note: If you would use direct URL like: https://c.ap1.visual.force.com/resource/1386163404000/imagePic 
then this will fail to work in different environments (sandboc,production etc)

SideNote: If you want to give bootstrap css to any VF tag use "styleClass" instead of "class" attribute

If this solves your problem, mark this as Best Answer