title: Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
body: <p>I'm having trouble with loading CSS and images and creating links to other pages when I have a servlet forward to a JSP. Specifically, when I set my <code>&lt;welcome-file&gt;</code> to <code>index.jsp</code>, the CSS is being loaded and my images are being displayed. However, if I set my <code>&lt;welcome-file&gt;</code> to <code>HomeServlet</code> which forwards control to <code>index.jsp</code>, the CSS is not being applied and my images are not being displayed. </p>
  
  <p>My CSS file is in <code>web/styles/default.css</code>.<br>
  My images are in <code>web/images/</code>.</p>
  
  <p>I'm linking to my CSS like so:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;link href="styles/default.css" rel="stylesheet" type="text/css" /&gt;
  </code></pre>
  
  <p>I'm displaying my images as follows:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img src="images/image1.png" alt="Image1" /&gt;
  </code></pre>
  
  <p>How is this problem caused and how can I solve it?</p>
  
  <hr>
  
  <p><strong>Update 1</strong>: I've added the structure of the application, as well as some other information that might help.</p>
  
  <p><img src="https://i.stack.imgur.com/nf0zO.png" alt="alt text"></p>
  
  <p>The <code>header.jsp</code> file is the file that contains the link tag for the CSS. The <code>HomeServlet</code> is set as my <code>welcome-file</code> in <code>web.xml</code>:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;welcome-file-list&gt;
      &lt;welcome-file&gt;HomeServlet&lt;/welcome-file&gt;
  &lt;/welcome-file-list&gt;
  </code></pre>
  
  <p>The servlet is declared and mapped as followes in the <code>web.xml</code>:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;servlet&gt;
      &lt;servlet-name&gt;HomeServlet&lt;/servlet-name&gt;
      &lt;servlet-class&gt;com.brianblog.frontend.HomeServlet&lt;/servlet-class&gt;
  &lt;/servlet&gt;
  &lt;servlet-mapping&gt;
      &lt;servlet-name&gt;HomeServlet&lt;/servlet-name&gt;
      &lt;url-pattern&gt;/&lt;/url-pattern&gt;
  &lt;/servlet-mapping&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Update 2</strong>: I found the problem finally - my servlet was mapped incorrectly. Apparently when setting a Servlet as your <code>&lt;welcome-file&gt;</code> it can't have a URL pattern of <code>/</code>, which I find sort of weird, because wouldn't that stand for the root directory of the site?</p>
  
  <p>The new mapping is as follows:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;servlet-mapping&gt;
      &lt;servlet-name&gt;HomeServlet&lt;/servlet-name&gt;
      &lt;url-pattern&gt;/HomeServlet&lt;/url-pattern&gt;
  &lt;/servlet-mapping&gt;
  </code></pre>