来自Javascript的图像src放在同一个Java包中

时间:2011-05-27 07:15:48

标签: java javascript html image

我已将.js文件放在Java包中,并附带.css文件和所需图像。目录结构是:

  • info.release.wicket.custom.ajax.link
    • AjaxLoadingLink.java
    • AjaxLoadingLink.css
    • AjaxLoadingLink.js
    • indicator.gif

现在,从.css文件中,indicator.gif可以作为background-image:url(indicator.gif);访问。但是在.js文件中spinner.innerHTML = "<img src='indicator.gif'>";无效。

在这种情况下,Javascript图像的路径是什么。

如果我将图像放入WAR的资源文件夹中并将其作为spinner.innerHTML = "<img src='../resources/indicator.gif'>";访问它,它就可以了。但我需要通过上述方式实现这一目标,即放入包中。

谢谢和问候。

2 个答案:

答案 0 :(得分:0)

指向.gif文件的路径将相对于调用js文件的实际HTML文档。如果.gif与html文档位于同一文件夹中(或者我猜你的.java文件?) ,那你可以从那里打电话。

答案 1 :(得分:0)

为什么要将JS放在java包中?如果您将所有文件放在目录中,例如/ ajaxloading /它应该工作。包中的Java资源放在WEB-INF \ classes中,你不能通过相关网址来处理资源。

另一种可能性是编写一个servlet,它从包中提供所有文件,然后将这个servlet映射到web.xml中的url vial servlet-mapping。

我也在项目中使用它。这是来源:

public class StyleProviderServlet extends HttpServlet {

    private static final long serialVersionUID = 7156462313946659366L;

    /**
     * read buffer.
     */
    private static final int BUFFER_SIZE = 102400;

    private final org.slf4j.Logger logger = org.slf4j.LoggerFactory.getLogger(StyleProviderServlet.class);

    /**
     * Package
     */
    private static final String PACKAGE = "com/mycompany/mypackage/style";

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    this.handleRequest(req, resp);
    }

    protected void handleRequest(HttpServletRequest req, HttpServletResponse resp) throws IOException {
    String pathInfo = req.getPathInfo();
    logger.debug("pathInfo = {}", pathInfo);

    StringBuilder resourcePathBuilder = new StringBuilder(100);
    resourcePathBuilder.append("/");
    resourcePathBuilder.append(PACKAGE);
    resourcePathBuilder.append(pathInfo);
    String resourcePath = resourcePathBuilder.toString();
    logger.debug("resourcePath: {}", resourcePath);

    InputStream inputStream = this.getClass().getResourceAsStream(resourcePath);

    if (inputStream != null) {
        String mimeType = getMimeType(pathInfo);
        if (mimeType != null) {
        resp.setContentType(mimeType);
        }

        BufferedInputStream bufferedInputStream = new BufferedInputStream(inputStream);
        try {
        logger.debug("at least {} bytes are ready to be read", bufferedInputStream.available());
        ServletOutputStream outputStream = resp.getOutputStream();
        int index = -1;
        byte[] buffer = new byte[BUFFER_SIZE];
        while ((index = bufferedInputStream.read(buffer)) != (-1)) {
            outputStream.write(buffer, 0, index);
        }

        } finally {
        bufferedInputStream.close();
        }
    } else {
        logger.debug("no resource found for resourcePath '{}'", resourcePath);
    }
    }

    protected String getMimeType(String pathinfo) {
    if (pathinfo != null) {
        ServletContext servletContext = getServletContext();
        String mimeType = servletContext.getMimeType(pathinfo);
        logger.debug("pathInfo :{}, mimeType={}", pathinfo, mimeType);
        return mimeType;
    } else {
        return null;
    }
    }

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    this.handleRequest(req, resp);
    }
}

这是web.xml中的映射:

<servlet-mapping>
    <servlet-name>StyleProviderServlet</servlet-name>
    <url-pattern>/style/*</url-pattern>
  </servlet-mapping>

现在,您可以通过url / style /例如com / mycompany / mypackage / style访问包中的所有文件。 /style/AjaxLoadingLink.css

您也可以这样将所有文件放在JAR中,并将此JAR放入WEB-INF / lib