3 Replies Latest reply on Apr 6, 2005 6:21 PM by treespace

    Displaying images in a JSP.

    robr

      I have a simple JSP that I am trying to display an image in. All that I get for an image is a white box with a red x in the middle of it. I have read on another web page that you can only display text or images on a JSP but not both. What's up with that. Here's my program.

      <%--
       Created by IntelliJ IDEA.
       User: Roland
       Date: Mar 10, 2005
       Time: 9:25:36 PM
       To change this template use File | Settings | File Templates.
      --%>
      <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix = "c" %>
      
      <%!
       String[] names = {"Ruth", "Matilda", "Millicent", "Micah"};
      %>
      
      <HTML>
       <HEAD><TITLE>Chapter 2 - Embedding Code</TITLE></HEAD>
       <BODY>
       <table><tr><td width="200" rowspan="6"><img src="images/code.gif" width="150" height="200"></td></tr></table>
       <c:forEach var="person" items="<%= names %>">
       <c:out value="${person}" />
       </c:forEach>
       </BODY>
      </HTML>
      


      When I look at my war file there is an images/code.gif file in it. The JSP shows up fine not the image.

      If it is a choice of text or images what determines which one you get to use?

      Thanks for any info.

        • 1. Re: Displaying images in a JSP.
          robr

          Okay I figured this out. Just a matter of not ever doing this before. I gave the wrong path for the image file in the src attribute of the img tag.

          Here is my new sample code called home.jsp.

          <%--
           Created by IntelliJ IDEA.
           User: rb
           Date: Mar 24, 2005
           Time: 11:03:29 AM
           To change this template use File | Settings | File Templates.
          --%>
          <%@ page contentType="text/html;charset=UTF-8" language="java" %>
          <html>
           <head><title>Simple jsp page</title></head>
           <IMG SRC="/webquotes10/images/home_header.jpg">
           <body>Place your content here</body>
          </html>
          


          In my initial attemp I thought I only needed to give the path to the image file as it was in the .war file which was images/home_header.jpg. What I needed to do was add the web module context root to the path and then it worked fine. My web module context root is webquotes10.

          So now my IMG tag look like
           <IMG SRC="/webquotes10/images/home_header.jpg">
          

          instead of
           <IMG SRC="/images/home_header.jpg">
          



          I am relieved that you can really do both text and images from a jsp.

          • 2. Re: Displaying images in a JSP.
            spoonman464

            You did manage to make it work but that's not really the way you want to do it. You need something more dynamic in your JSP than a hard-coded context root. If, for example, you change the context root, you will have to change the hardcoded path in every img tag. Yuck!

            Instead, you should compute the context root in a JSP expression like this:

            <img src="<%= request.getContextPath() %>/images/home_header.jpg">


            By programmatically determining the context root, you can redeploy this JSP with ANY legal context root and the img reference will still work. The "request" object is a freebie: it is one of the several "implicit objects" automatically available in every JSP. Its data type is
            javax.servlet.http.HttpServletRequest and extends from javax.servlet.ServletRequest

            You might want to look this one up because it gives access to many useful things in JSPs like the http session, the query string, the path info, cookies, and the all important security thing called the Principal.

            Get it?

            Spoon

            • 3. Re: Displaying images in a JSP.

              Yuck! Drop the leading / and use relative paths. Not context required. If you need absolute use a tag. It's mindbogglingly simple to create tags nowadays; no code required even. That way the tag can supply the context for absolute paths and it can check for that.

              <tools:img path="/images/foo.png"/>