Win a copy of Pro Spring MVC with WebFlux: Web Development in Spring Framework 5 and Spring Boot 2 this week in the Spring forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Jeanne Boyarsky
  • Liutauras Vilda
  • Rob Spoor
  • Bear Bibeault
  • Tim Cooke
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Piet Souris
  • Frits Walraven
  • Himai Minh

Study note on h:graphicImage

Posts: 2085
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
To add some notes to Paul Statham's notes (, h:graphicImage is important to this exam.
1. Assume there is a resources/images folder in the war file.
  <h:graphicImage value ="resources/images/mypicture.jpg"/> where value is relative to the context path root.  
  <h:graphicImage value = "/resources/images/mypicture.jpg"/> still works
   <h:graphicImage library="images" name="mypicture.jpg"/>
   <h:graphicImage value ="#{resource['images:mypicture.jpg']}"
2. Assume there is image folder in the war file. Url should start with /. This url is a relative path to the context path root.
   <h:graphicImage url="/image/mypicture.jpg"/>
3. Assume there is resources/images folder in the war file.
  <h:graphicImage url="/resources/images/3_image.jpg"/>

Context path root is the root of the war file.
For example in fileupload example of chapter 13 of JSF core book
fileupload.war is extracted in this structure:

WEB-INF (cannot be accessed directly by users from a browser)
  - classes folder
  - lib folder
  - web.xml
resources (folder) *1
  - images (folder)
       - 3_images.jpg
       -mypicture.jpg (can be accessed by localhost:8080/fileupload/faces/resources/images/mypicture.jpg) *2
image (folder)
 - mypicture.jpg
upload (folder) (at the same level as the context path root)
 -2_image.jpg (can be accessed by localhost:8080/fileupload/faces/upload/2_image.jpg)
 - uploadimage.xhtml *3
index.xhtml (at the same level as the context path root)
*1 resources, image, upload folders index.xhtml, next.xhtml can be directly accessed by a browser since they are outside WEB-INF.
*2  context path root is fileupload/faces
*3 From uploadimage.xhtml, if we need to access 2_image, we need to use the url relative to context path root: <h:graphicImage url="/upload/2_image.jpg"/> or <h:graphicImage value="/upload/2_image.jpg"/>
not <h:graphicImage value ="2_image.jpg"/> (not relative to the context root).

Knowing these is good enough for the exam.
I was born with webbed fish toes. This tiny ad is my only friend:
Thread Boost feature
    Bookmark Topic Watch Topic
  • New Topic