Browser can t access find relative resources like CSS images and links when calling a Servlet which forwards to a JSP

Question

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  lt welcome-file gt  to index jsp  the CSS is being loaded and my images are being displayed  However  if I set my  lt welcome-file gt  to HomeServlet which forwards control to index jsp  the CSS is not being applied and my images are not being displayed    My CSS file is in web styles default css  My images are in web images    I m linking to my CSS like so    lt link href  styles default css  rel  stylesheet  type  text css    gt    I m displaying my images as follows    lt img src  images image1 png  alt  Image1    gt    How is this problem caused and how can I solve it     Update 1  I ve added the structure of the application  as well as some other information that might help     The header jsp file is the file that contains the link tag for the CSS  The HomeServlet is set as my welcome-file in web xml    lt welcome-file-list gt       lt welcome-file gt HomeServlet lt  welcome-file gt   lt  welcome-file-list gt    The servlet is declared and mapped as followes in the web xml    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      Update 2  I found the problem finally - my servlet was mapped incorrectly  Apparently when setting a Servlet as your  lt welcome-file gt  it can t have a URL pattern of    which I find sort of weird  because wouldn t that stand for the root directory of the site   The new mapping is as follows    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

User · Answer

short answer - add following line in the jsp which will define the base base href    root of your application

User · Answer

You can try out this one as well as  Because this worked for me and it s simple    lt style gt       lt    include file   css style css    gt   lt  style gt

User · Answer

You must analyse the actual HTML output  for the hint    By giving the path like this means  from current location   on the other hand if you start with a   that would mean  from the context

User · Answer

Below code worked for me   instead of       use      lt    include file  styles default css

User · Answer

If you are using Spring MVC  then you need to declare default action servlet for static contents  Add the following entries in spring-action-servlet xml  It worked for me   NOTE  keep all the static contents outside WEB-INF      lt  -- Enable annotation-based controllers using  Controller annotations -- gt   lt bean id  annotationUrlMapping  class  org springframework web servlet mvc annotation DefaultAnnotationHandlerMapping  gt       lt property name  order  value  0    gt   lt  bean gt    lt bean id  controllerClassNameHandlerMapping  class  org springframework web servlet mvc support ControllerClassNameHandlerMapping  gt       lt property name  order  value  1    gt   lt  bean gt    lt bean id  annotationMethodHandlerAdapter  class  org springframework web servlet mvc annotation AnnotationMethodHandlerAdapter   gt

User · Answer

I faced similar issue with Spring MVC application  I used  lt  mvc resources  gt  tag to resolve this issue   Please find the following link having more details   http   www mkyong com spring-mvc spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page

User · Answer

Your welcome page is set as That Servlet   So all css   images path should be given relative to that servlet DIR   which is a bad idea   why do  you need the servlet as a home page   set  jsp as index page and redirect to any page from there     are you trying to populate any fields from db is that why you are using servlet

User · Answer

All relative URLs in the HTML page generated by the JSP file are relative to the current request URL  the URL as you see in the browser address bar  and not to the location of the JSP file in the server side as you seem to expect  It s namely the webbrowser who has to download those resources individually by URL  not the webserver who has to include them from disk somehow  Apart from changing the relative URLs to make them relative to the URL of the servlet instead of the location of the JSP file  another way to fix this problem is to make them relative to the domain root  i e  start with a     This way you don t need to worry about changing the relative paths once again when you change the URL of the servlet   lt head gt       lt link rel  quot stylesheet quot  href  quot  context css default css quot    gt       lt script src  quot  context js default js quot  gt  lt  script gt   lt  head gt   lt body gt       lt img src  quot  context img logo png quot    gt       lt a href  quot  context page jsp quot  gt link lt  a gt       lt form action  quot  context servlet quot  gt  lt input type  quot submit quot    gt  lt  form gt   lt  body gt   However  you would probably like not to hardcode the context path  Very reasonable  You can obtain the context path in EL by   pageContext request contextPath    lt head gt       lt link rel  quot stylesheet quot  href  quot   pageContext request contextPath  css default css quot    gt       lt script src  quot   pageContext request contextPath  js default js quot  gt  lt  script gt   lt  head gt   lt body gt       lt img src  quot   pageContext request contextPath  img logo png quot    gt       lt a href  quot   pageContext request contextPath  page jsp quot  gt link lt  a gt       lt form action  quot   pageContext request contextPath  servlet quot  gt  lt input type  quot submit quot    gt  lt  form gt   lt  body gt    which can easily be shortened by  lt c set var  quot root quot  value  quot   pageContext request contextPath  quot    gt  and used as   root  elsewhere  Or  if you don t fear unreadable XML and broken XML syntax highlighting  use JSTL  lt c url gt    lt head gt       lt link rel  quot stylesheet quot  href  quot  lt c url value  quot  css default css quot    gt  quot    gt       lt script src  quot  lt c url value  quot  js default js quot    gt  quot  gt  lt  script gt   lt  head gt   lt body gt       lt img src  quot  lt c url value  quot  img logo png quot    gt  quot    gt       lt a href  quot  lt c url value  quot  page jsp quot    gt  quot  gt link lt  a gt       lt form action  quot  lt c url value  quot  servlet quot    gt  quot  gt  lt input type  quot submit quot    gt  lt  form gt   lt  body gt   Either way  this is in turn pretty cumbersome if you have a lot of relative URLs  For that you can use the  lt base gt  tag  All relative URL s will instantly become relative to it  It has however to start with the scheme  http     https     etc   There s no neat way to obtain the base context path in plain EL  so we need a little help of JSTL here   lt   taglib prefix  quot c quot  uri  quot http   java sun com jsp jstl core quot    gt   lt   taglib prefix  quot fn quot  uri  quot http   java sun com jsp jstl functions quot    gt   lt c set var  quot req quot  value  quot   pageContext request  quot    gt   lt c set var  quot uri quot  value  quot   req requestURI  quot    gt   lt c set var  quot url quot  gt   req requestURL  lt  c set gt       lt head gt       lt base href  quot   fn substring url  0  fn length url  - fn length uri     req contextPath   quot    gt       lt link rel  quot stylesheet quot  href  quot css default css quot    gt       lt script src  quot js default js quot  gt  lt  script gt   lt  head gt   lt body gt       lt img src  quot img logo png quot    gt       lt a href  quot page jsp quot  gt link lt  a gt       lt form action  quot servlet quot  gt  lt input type  quot submit quot    gt  lt  form gt   lt  body gt   This has in turn  again  some caveats  Anchors  the  identifier URL s  will become relative to the base path as well  You would like to make it relative to the request URL  URI  instead  So  change like  lt a href  quot  identifier quot  gt jump lt  a gt   to  lt a href  quot   uri  identifier quot  gt jump lt  a gt   Each way has its own pros and cons  It s up to you which to choose  At least  you should now understand how this problem is caused and how to solve it    See also   Is it recommended to use the  lt base gt  html tag

User · Answer

As for your update  I was confused for the reasoning behind in  Dug a little deeper and found this gem    yoursite com becomes yoursite com  yoursite com  is a directory  so the welcome-file-list is scanned yoursite com CMS is the first welcome-file   CMS  in the welcome-file-list   and there is a mapping of  CMS to the MyCMS servlet  so that servlet is accessed    Source  http   wiki metawerx net wiki HowToUseAServletAsYourMainWebPage  So  the mapping then does make sense   And one can now freely use   pageContext request contextPath  path  as src href for relative links

[css] Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP

Examples related to css

Examples related to image

Examples related to jsp

Examples related to servlets