Image src from Javascript placed in same Java package

I have placed a .js file in a Java package along with a .css file and required image. The directory structure is:

• info.release.wicket.custom.ajax.link
  • AjaxLoadingLink.java
  • AjaxLoadingLink.css
  • 开发者_C百科AjaxLoadingLink.js
  • indicator.gif

Now from the .css file the indicator.gif can be accessed as background-image:url(indicator.gif);. But in the .js file spinner.innerHTML = "<img src='indicator.gif'>"; is not working.

What will be the path of the image from the Javascript in this situation.

If I placed the image into resources folder of the WAR and access it as spinner.innerHTML = "<img src='../resources/indicator.gif'>"; it is working. But I need to accomplish this by the aforesaid way, that is placing into the package.

Thanks and regards.

The path to indicator.gif will be relative to the actual HTML document that the js file is called in. If the .gif is in the same folder as the html doc (or i guess .java file in your case?), then you can call it from there.

Why place the JS in a java package? If you put all the files in a directory e.g. /ajaxloading/ it should work. Java resources in packages are put in WEB-INF\classes you can't adress resources via relaitive url from there.

Another possibility is to write a servlet that serves all files form a package and then map this servlet to an url vial servlet-mapping in web.xml.

I also use this in a project. Here's the source:

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);
    }
}

And here's the mapping in web.xml:

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

Now you can access all files from the package com/mycompany/mypackage/style via the url /style/ e.g. /style/AjaxLoadingLink.css

You can also put all files in a JAR this way and put this JAR into WEB-INF/lib