Pictures in JSP aren't displayed

Question

I have a problem. I'm trying to add pictures to a jsp file in my project but they are not displayed. The image is in BookStoreWebsite/web/images/BookstoreLogo.png.

Here is my jsp file index.jsp:

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Evergreen Books - Online Books Store</title>
</head>
<body>
<div align="center">
        <div>
        <img src="images/BookstoreLogo.png" />
        </div>
    </div>

    <div align="center">
        <h3>This is the main content: New Books, Best Selling Books:</h3>
        <h2>New Books:</h2>
        <h2>Best-Selling Books:</h2>
        <h2>Most-Favourite Books:</h2>
    </div>

    <jsp:directive.include file="footer.jsp" />
</body>
</html>

Doesn't work

But, when i use images from the internet with a link, it works. Here is an example:

<div align="center">
        <div>
        <img src="https://image.flaticon.com/icons/png/512/3/3901.png" />
        </div>
    </div>

It works

I tried various solutions but failed to fix it:

1)I tried this:

<img src="http://localhost:8080/BookStoreWebsite/web/images/BookstoreLogo.png" />

2) And this

<img src="<%= request.getContextPath() %>/images/BookstoreLogo.png">

3)I tried to put the picture in the directory of my project.

4) I made a project in Eclipse IDE with Tomcat 9.0. I thought maybe that was the issue. Then I created the same project in IntelliJ Idea with Glassfish. The same result. I suspect, perhaps the problem is with the servlet or with web.xml but i don't know for sure.

What am I missing here? Thanks!

Here is the servlet:

@WebServlet("/")
public class HomeServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public HomeServlet() {
        super(); 
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String homepage = "frontend/index.jsp";
        RequestDispatcher dispatcher = request.getRequestDispatcher(homepage);
        dispatcher.forward(request, response);
    }
}

Here is web.xml in Eclipse:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>BookStoreWebsite</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>

Here is web.xml in Intellij:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <listener>
        <listener-class>com.sun.xml.ws.transport.http.servlet.WSServletContextListener</listener-class>
    </listener>
    <servlet>
        <description>JAX-WS endpoint</description>
        <display-name>WSServlet</display-name>
        <servlet-name>WSServlet</servlet-name>
        <servlet-class>com.sun.xml.ws.transport.http.servlet.WSServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>WSServlet</servlet-name>
        <url-pattern>/services/*</url-pattern>
    </servlet-mapping>

</web-app>

Project in Eclipse

Project in IntelliJ

Just replace servlet URL pattern `"/"` by `""`. Explanation in abovelinked duplicates. — BalusC, May 04 '20 at 12:07
Oh, man you can only imagine my relief right now. Thank you man! It works now! — JohnSmithJohn, May 04 '20 at 13:04

Shilan · Answer 1 · 2020-05-04T12:14:09.230

0

Your index.jsp is not located in the same folder as the images. You need to come one level up and then point to images/BookstoreLogo.png.

src="../images/BookstoreLogo.png"

Of course there is a better way of adding the images folder to your classpath and then it will be accessible like you have addressed it. Or better in my opinion is to get the context and address your images like:

<img src="${pageContext.request.contextPath}/images/logo.png"/>

or

<img src="<%= request.getContextPath() %>/images/logo.png"/>

edited May 04 '20 at 12:14

answered May 04 '20 at 11:19

Shilan

813
1
11
17

I placed BookstoreLogo into the same folder where index.jsp is situated and it doesn't work. Maybe i got your solution wrong? – JohnSmithJohn May 04 '20 at 11:59
There is nothing wrong with your structure. I am just saying when I look at your eclipse screenshot the index,jsp is in frontend folder and logo.png is placed in images folder. You are giving relative path here to your picture so you need to come one levelup to get too root and then navigate to images>logo.png again when addressing. – Shilan May 04 '20 at 12:08
As you can see, i tried this solution: and result is the same. I moved this logo to the root folder, to the same folder with index.jsp, wrote a fuul path to the file. all the same, doesn't work – JohnSmithJohn May 04 '20 at 12:19
have you also tried with a leading slash in front? like src="/images/BookstoreLogo.png"? – Shilan May 04 '20 at 12:26
when you see the page in browser, try to ctrl+u in chrome or IE to view source, How the url is interpreted there? – Shilan May 04 '20 at 12:27
yes, i tried to put "/ " in front of it, doesn't work. Here is the line in a browser if i press ctrl+U: – JohnSmithJohn May 04 '20 at 13:04
2

Shilan, thank you for your help. A guy gave me instructions above. I removed "/" in HomeServlet in url-pattern and it started working. That was the issue. Thank you one more time for your efforts! – JohnSmithJohn May 04 '20 at 13:11

Pictures in JSP aren't displayed

1 Answers1