在 FireFox 中显示图像的问题

Question

我有一个 JSP 页面，其中有一个 div 标签，其中有一个 IMG 标签。使用这个 IMG 标签我想在其中显示一个图像。这里图像的源路径来自数据库，所以我使用 JSP 脚本分配了一个 JSP 变量。此 JSP 变量具有图像的源路径。 该图像路径可能来自不同机器或同一机器，即图像存储在不同机器或同一机器上，即存储在不同驱动器上的本地机器上。 问题是如何给出存储在不同机器和同一机器上的图像路径。我尝试了不同的方法，例如提供该机器的 IP 地址。 这是存储图像的本地机器的路径

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

使用这种语法，图像在 Internet Explorer 中可见，但使用相同的语法，它在 FireFox、Google Chrome 等中不可见。

请在朋友中指导我。

还告诉我如何给出存储在不同机器上的图像的路径，这些机器可以在 Internet Explorer、FireFox、Google chrome 等中使用。

Answer 1

如果您要在互联网上发布此页面，请不要对 img 标签使用绝对路径。不起作用。请改用相对路径。您需要将图片保存在与 html 页面相同的目录级别。例如，如果您的页面存储在此处：C:\Web\Page.html 然后将您的图片放在这里 C:\Web\Images\IMG001.jpg。

你的代码应该是这样的：

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

编辑：

对于带有图片处理程序的远程服务器：

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

您需要实现以下图像处理程序：

• 通过图片id从db获取图片路径

• 将图像流从识别的路径返回到客户端浏览器

Answer 2

File URIs 的格式应该是 file://host/path 所以对于你的例子，它会是

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

我已经在 IE、Firefox、Opera 上尝试过，它可以工作。我没有 Chrome，但我认为它应该没有问题。但是，当您使用文件 URI 时还有其他注意事项，例如，您无法访问另一台 Windows 机器上的图像，除非它位于共享文件夹中，并且远程机器上文件的语法因浏览器而异。 （详情请见wikipedia）

因此，如果要在 Intranet 或 Internet 上公开此 JSP 文件，最好将图像存储在 Web 服务器上的外部可访问文件夹中，并使用 IMG 标记中的相对或绝对 HTTP URI 引用它们(s)。

Answer 3

HTML <img> 元素的src 属性应指向 URL，而不是本地磁盘文件系统路径。 HTML页面即从服务器机器下载到客户端机器并在客户端机器上解析。 HTML 页面中出现的任何 URL（例如 Javascript、样式表、图像等）都将从客户端重新调用。如果客户端遇到本地磁盘文件系统路径，它会尝试在自己的本地磁盘文件系统中搜索文件。如果服务器和客户端是物理上不同的机器，这将不起作用。

在您的特定情况下，有两种方法可以解决此问题。

1. 为您的 servletcontainer 添加一个新的 web 应用程序上下文，其纯粹目的是为静态文件提供服务。不清楚你使用的是哪个servletcontainer，但它是Tomcat，那么你基本上需要做的就是将以下Context元素添加到/conf/server.xml：

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

   这样，http://example.com/images/.... 就可以访问它们。

2. 创建一个Servlet 类，该类使用java.io.File 获取图像文件的InputStream 并将其写入响应的OutputStream。您可以使用请求参数或路径信息来识别图像。以下是此类 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) {}
    }
}

将其映射到web.xml 上的url-pattern，例如/images/*。这样您就可以通过例如http://example.com/images/filename.jpg 访问图像。

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

另一个图像 servlet 示例可以在 here 找到。

Answer 4

别忘了ALT 标签：

<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" />