web-dev-qa-db-ja.com

ブラウザは、JSPに転送するサーブレットを呼び出すときに、CSS、画像、リンクなどの相対リソースにアクセス/検索できません

JSPにサーブレットを転送しているときに、CSSと画像のロードや他のページへのリンクの作成に問題があります。具体的には、<welcome-file>をindex.jspに設定すると、CSSが読み込まれ、画像が表示されます。ただし、<welcome-file>をHomeServletに設定すると、index.jspに制御が転送され、CSSは適用されず、画像は表示されません。

CSSファイルはweb/styles/default.cssにあります。
私の画像はweb/images/にあります。

私はCSSに次のようにリンクしています：

<link href="styles/default.css" rel="stylesheet" type="text/css" />

次のように画像を表示しています。

<img src="images/image1.png" alt="Image1" />

この問題はどのように発生し、どのように解決できますか？

更新1：アプリケーションの構造と役立つその他の情報を追加しました。

alt text

header.jspファイルは、CSSのリンクタグを含むファイルです。 HomeServletは、welcome-fileのweb.xmlとして設定されます。

<welcome-file-list>
    <welcome-file>HomeServlet</welcome-file>
</welcome-file-list>

サーブレットは、web.xmlで次のように宣言およびマッピングされます。

<servlet>
    <servlet-name>HomeServlet</servlet-name>
    <servlet-class>com.brianblog.frontend.HomeServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>HomeServlet</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

更新2：私はついに問題を見つけました-私のサーブレットは正しくマッピングされていません。サーブレットを<welcome-file>として設定する場合、/のURLパターンを使用できないようです。これは、サイトのルートディレクトリを表していないため、奇妙なものです。

新しいマッピングは次のとおりです。

<servlet-mapping>
    <servlet-name>HomeServlet</servlet-name>
    <url-pattern>/HomeServlet</url-pattern>
</servlet-mapping>
cssimagejspservlets
76
Brian DiCasa

JSPファイルによって生成されたHTMLページ内のすべての相対URLは、現在のリクエストURL（ブラウザーのアドレスバーに表示されるURL）およびnot予想どおりサーバー側のJSPファイルの場所に。つまり、これらのリソースをURLで個別にダウンロードする必要があるのはWebブラウザーであり、何らかの方法でディスクからリソースを含める必要があるWebサーバーではありません。

相対URLを変更して、JSPファイルの場所ではなくサーブレットのURLに相対するように変更する以外に、この問題を修正する別の方法は、ドメインルートに相対することです（つまり、/ ）。このようにすると、サーブレットのURLを変更するときに相対パスを再度変更することを心配する必要がなくなります。

<head>
    <link rel="stylesheet" href="/context/css/default.css" />
    <script src="/context/js/default.js"></script>
</head>
<body>
    <img src="/context/img/logo.png" />
    <a href="/context/page.jsp">link</a>
    <form action="/context/servlet"><input type="submit" /></form>
</body>

ただし、コンテキストパスをハードコーディングしないことをお勧めします。非常に合理的です。 ${pageContext.request.contextPath}でELのコンテキストパスを取得できます。

<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/default.css" />
    <script src="${pageContext.request.contextPath}/js/default.js"></script>
</head>
<body>
    <img src="${pageContext.request.contextPath}/img/logo.png" />
    <a href="${pageContext.request.contextPath}/page.jsp">link</a>
    <form action="${pageContext.request.contextPath}/servlet"><input type="submit" /></form>
</body>

（<c:set var="root" value="${pageContext.request.contextPath}" />で簡単に短縮でき、他の場所で${root}として使用できます）

または、読めないXMLや壊れたXML構文の強調表示を恐れない場合は、 [〜＃〜] jstl [〜＃〜]<c:url> を使用します。

<head>
    <link rel="stylesheet" href="<c:url value="/css/default.css" />" />
    <script src="<c:url value="/js/default.js" />"></script>
</head>
<body>
    <img src="<c:url value="/img/logo.png" />" />
    <a href="<c:url value="/page.jsp" />">link</a>
    <form action="<c:url value="/servlet" />"><input type="submit" /></form>
</body>

どちらにしても、相対URLがたくさんある場合、これはかなり面倒です。そのためには、<base>タグを使用できます。すべての相対URLは、すぐに相対URLになります。ただし、スキーム（http://、https://など）で開始する必要があります。プレーンELでベースコンテキストパスを取得する適切な方法はないため、ここで [〜＃〜] jstl [〜＃〜] の少しの助けが必要です。

<%@taglib prefix="c" uri="http://Java.Sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://Java.Sun.com/jsp/jstl/functions" %>
<c:set var="req" value="${pageContext.request}" />
<c:set var="uri" value="${req.requestURI}" />
<c:set var="url">${req.requestURL}</c:set>
...
<head>
    <base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
    <link rel="stylesheet" href="css/default.css" />
    <script src="js/default.js"></script>
</head>
<body>
    <img src="img/logo.png" />
    <a href="page.jsp">link</a>
    <form action="servlet"><input type="submit" /></form>
</body>

これには、いくつかの警告があります。アンカー（#identifier URL's）もベースパスに対して相対的になります！代わりに、リクエストURL（URI）を基準にしてください。だから、のような変更

<a href="#identifier">jump</a>

に

<a href="${uri}#identifier">jump</a>

それぞれの方法には長所と短所があります。どちらを選ぶかはあなた次第です。少なくとも、この問題の原因と解決方法を理解する必要があります:)

こちらもご覧ください：

96
BalusC

Spring MVCアプリケーションでも同様の問題に直面しました。この問題を解決するために< mvc:resources >タグを使用しました。

詳細が記載された次のリンクを見つけてください。

http://www.mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page/

6
Ashwini Patil

ヒントを得るには、実際のHTML出力を分析する必要があります。

このようにパスを指定すると、「現在の場所から」という意味になりますが、/これは「コンテキストから」を意味します。

2
Adeel Ansari

Spring MVCを使用している場合、静的コンテンツのデフォルトアクションサーブレットを宣言する必要があります。 spring-action-servlet.xmlに次のエントリを追加します。それは私のために働いた。

注：すべての静的コンテンツをWEB-INFの外部に保管してください。

<!-- Enable annotation-based controllers using @Controller annotations -->
<bean id="annotationUrlMapping" class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">
    <property name="order" value="0" />
</bean>

<bean id="controllerClassNameHandlerMapping" class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping">
    <property name="order" value="1" />
</bean>

<bean id="annotationMethodHandlerAdapter" class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/>
0
AjayP

短い答え-ベースを定義する次の行をjspに追加します
base href = "/ {アプリケーションのルート} /"

0
Ankit Pandoh

あなたの更新に関しては、背後にある理由について混乱していました。少し掘り下げて、この逸品を見つけました。

  • yoursite.comはyoursite.com/になります
  • yoursite.com/はディレクトリなので、welcome-file-listがスキャンされます
  • yoursite.com/CMSは最初のウェルカムファイル（welcome-file-listの「CMS」）であり、MyCMSサーブレットへの/ CMSのマッピングがあるため、サーブレットにアクセスできます。

ソース： http://wiki.metawerx.net/wiki/HowToUseAServletAsYourMainWebPage

したがって、マッピングは意味をなします。

そして、相対リンクのsrc/hrefとして$ {pageContext.request.contextPath}/path /を自由に使用できるようになりました！

0
Justin Cuaresma

ようこそページはThat Servletとして設定されます。したがって、すべてのcss、imagesパスは、そのサーブレットDIRに関連して指定する必要があります。これは悪い考えです！なぜホームページとしてサーブレットが必要なのですか？ .jspをインデックスページとして設定し、そこから任意のページにリダイレクトしますか？

あなたはdbからフィールドに値を入力しようとしているのはなぜサーブレットを使用しているのですか？

0
GoodSp33d

以下のコードは私のために働いた。

<％@ include file = "styles/default.css"％>を使用する代わりに

0
Chamika Ravinda