Problem in displaying image in FireFox

I have a JSP page on which I have a div tag in which there is a a IMG tag. Using this IMG tag I want to show an image in it. Here the source path of an image is comes from database so I assigned a JSP variable using JSP scriplet. This JSP variable have the source path of an image. This path of image may be of different machine or of same machine i.e. images are stored on different machine or on same machine i.e. on local machine on different drive. The problem is that how to give path of image stored on different machine as well as on same machine. I have tried different ways like by giving ip address of that machine. Here is the path that of local machine where the image is stored

img src= file:\localhost\D:\ScannedSheets\testproj/batch1/IMG001.jpg style="z-index:1; position:absolute; top:0; left:0; width:850; height:1099"

With this syntax the image is visible in Internet Explo开发者_Go百科rer but With the same syntax Its not visible in FireFox, Google Chrome etc.

Please Guide me in friends.

Also tell me that how to give path of the image stored on different machine which works In Internet Explorer, FireFox, Google chrome etc.

Don't use absolute paths for img tags if you are going to publish this page on the internet. It will not work. Use relative path instead. You need to save your picture on the same directory level as you html page. For example if your page stored here: C:\Web\Page.html then put you picture here C:\Web\Images\IMG001.jpg.

And your code should look like this:

<img src="Images/IMG001.jpg" style="z-index:1; position:absolute; top:0; left:0; width:850; height:1099" />

EDIT:

For remote server with picture handler:

<img src="http://remoteserver/ImageHandler/?imageId=2323" style="z-index:1; position:absolute; top:0; left:0; width:850; height:1099" />

You will need to implement image handler wich does the folowing:

• Gets image path from db by image id

• Returns image stream to client browser from identified path

File URIs should be in the format file://host/path so for your example, it would be

img src="file://localhost/D:/ScannedSheets/testproj/batch1/IMG001.jpg" ...

I've tried it on IE, Firefox, Opera and it works. I don't have Chrome but I assume it should have no issues. There are however other considerations when you use file URIs, e.g you can't access the images on another Windows machine unless it's in a shared folder and the syntax for files on remote machines varies across browsers. (See wikipedia for more details)

Hence if this JSP file is to be publicly available on the intranet or internet, you're better off storing the images in a externally accessible folder on the web server and referencing them using a relative or absolute HTTP URIs in your IMG tag(s).

The src attribute of the HTML <img> element should point to an URL, not to a local disk file system path. The HTML page is namely downloaded from server machine to client machine and parsed at the client machine. Any URL's which occurs in the HTML page (e.g. Javascripts, Stylesheets, Images, etc) would be re-invoked from the client side on. If the client encounters a local disk file system path, it will try to search for the file at its own local disk file system. This ain't going to work if the server and the client are physically different machines.

In your particular case, there are two ways to solve this problem.

1. Add a new webapplication context to your servletcontainer with the pure purpose to serve static files. It's unclear which servletcontainer you're using, but it it's Tomcat, then all you basically need to do is to add the following Context element to /conf/server.xml:

   <Context docBase="/path/to/images" path="/images" />
   

   This way they will be accessible by http://example.com/images/.....

2. Create a Servlet class which uses java.io.File to get an InputStream of the image file and writes it to the OutputStream of the response. You can use request parameters or pathinfo to identify the image. Here's a basic example of such a servlet:

protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException
{
    String filename = URLDecoder.decode(request.getPathInfo(), "UTF-8");
    File file = new File("/path/to/images", filename);

    response.setContentType(getServletContext().getMimeType(file.getName()));
    response.setContentLength(file.length());
    response.setHeader("Content-Disposition", "inline; filename=\"" + file.getName() + "\"");

    BufferedInputStream input = null;
    BufferedOutputStream output = null;

    try {
        input = new BufferedInputStream(new FileInputStream(file));
        output = new BufferedOutputStream(response.getOutputStream());

        byte[] buffer = new byte[8192];
        int length;
        while ((length = input.read(buffer)) > 0) {
            output.write(buffer, 0, length);
        }
    } finally {
        if (output != null) try { output.close(); } catch (IOException ignore) {}
        if (input != null) try { input.close(); } catch (IOException ignore) {}
    }
}

Map it in web.xml on an url-pattern of for example /images/*. This way you can access images by for example http://example.com/images/filename.jpg.

<img src="/images/filename.jpg">

Another image servlet example can be found here.

And don't forget the ALT tag:

<img src="Images\IMG001.jpg" style="z-index:1; position:absolute; top:0; left:0; width:850; height:1099" alt="some name to this image for google" />