Проблема с отображением изображения в FireFox - PullRequest
1 голос
/ 04 мая 2010

У меня есть страница JSP, на которой у меня есть тег div, в котором есть тег IMG. Используя этот тег IMG, я хочу показать изображение в нем. Здесь исходный путь к изображению взят из базы данных, поэтому я назначил переменную JSP с помощью сценария JSP. Эта переменная JSP имеет исходный путь к изображению. Этот путь к изображению может быть на другой машине или на одной и той же машине, то есть изображения хранятся на другой машине или на одной машине, то есть на локальной машине на другом диске. Проблема в том, как указать путь к изображению, хранящемуся на другой машине, а также на одной машине. Я пробовал разные способы, например, давая IP-адрес этой машины. Вот путь к локальной машине, где хранится изображение

img src = file: \ localhost \ D: \ ScannedSheets \ testproj / batch1 / IMG001.jpg style = "z-index: 1; позиция: абсолютная; верх: 0; слева: 0; ширина: 850 ; высота: 1099 "

С этим синтаксисом изображение видно в Internet Explorer, но с тем же синтаксисом Его не видно в FireFox, Google Chrome и т. Д.

Пожалуйста, ведите меня в друзьях.

Также скажите мне, как указать путь к изображению, хранящемуся на другой машине, который работает в Internet Explorer, FireFox, Google Chrome и т. Д.

Ответы [ 4 ]

3 голосов
/ 04 мая 2010

Не используйте абсолютные пути для тегов 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" />

EDIT:

Для удаленного сервера с обработчиком изображения:

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

Вам потребуется реализовать обработчик изображения, который выполняет следующие действия:

  • Получает путь изображения из БД по идентификатору изображения

  • Возвращает поток изображений в браузер клиента по указанному пути

0 голосов
/ 04 мая 2010

Атрибут src элемента HTML <img> должен указывать на URL, а не на путь к файловой системе локального диска. HTML-страница загружается с сервера на клиентский компьютер и анализируется на клиентском компьютере. Любые URL-адреса, которые встречаются на странице HTML (например, Javascripts, Stylesheets, Images и т. Д.), Будут повторно вызываться со стороны клиента. Если клиент обнаружит путь к файловой системе локального диска, он попытается найти файл в своей собственной файловой системе локального диска. Это не сработает, если сервер и клиент - физически разные машины.

В вашем конкретном случае есть два способа решения этой проблемы.

  1. Добавьте новый контекст веб-приложения к сервлетконтейнеру с единственной целью - обслуживать статические файлы. Непонятно, какой сервлет-контейнер вы используете, но это Tomcat, и все, что вам в основном нужно сделать, это добавить следующий элемент Context в /conf/server.xml:

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

    Таким образом, они будут доступны для http://example.com/images/.....

  2. Создайте класс Servlet, который использует java.io.File для получения InputStream файла изображения и записывает его в OutputStream ответа. Вы можете использовать параметры запроса или pathinfo для идентификации изображения. Вот базовый пример такого сервлета:


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

Другой пример сервлета изображения можно найти здесь .

0 голосов
/ 04 мая 2010

И не забудьте тег 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" />
0 голосов
/ 04 мая 2010

URI файлов должны иметь формат file://host/path, поэтому для вашего примера это будет

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

Я пробовал это в IE, Firefox, Opera, и это работает. У меня нет Chrome, но я предполагаю, что у него не должно быть проблем. Однако при использовании файловых URI существуют и другие соображения, например, вы не можете получить доступ к изображениям на другом компьютере Windows, если он не находится в общей папке, а синтаксис файлов на удаленных компьютерах различается в разных браузерах. (Подробнее см. Википедия )

Следовательно, если этот JSP-файл должен быть общедоступным в интрасети или Интернете, лучше хранить изображения во внешне доступной папке на веб-сервере и ссылаться на них, используя относительные или абсолютные URI-адреса HTTP в теге IMG. (с).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...