Возникают проблемы с отображением изображения с использованием пути из базы данных (преобразование // файла в // http URI) - PullRequest
0 голосов
/ 04 марта 2020

Короче говоря: я создал приложение, в котором пользователь может добавлять фотографии в базу данных, а также просматривать их позже. Путь к фотографиям сохраняется в БД, а фактические фотографии сохраняются в папке на локальном хосте. Приложение работало до тех пор, пока мне не пришлось показывать фотографии пользователю. Вот где я застрял. Я использую java EE, Servlet, mysql, html, jsp и css.

После прочтения этого поста здесь Загрузка изображений извне webapps / webcontext / deploy использование папки или imageтег , я решил go для подхода № 1, начиная с первого ответа от Balus C, а именно, перемещая мою папку, которая содержит пользовательские изображения в папке webapp tomcat, как это:

Рабочий стол \ ApacheTomcat \ apache -tomcat-9.0.24 \ webapps \ TripAppServletsAndJspPhotos

Теперь мой метод сохранения фотографий в папке использует жестко закодированный путь, который выглядит следующим образом.

public static void addPhotosToStorage(Trip trip) throws IOException {
    File uploads = new File("C:\\Users\\helloApp\\Desktop\\ApacheTomcat\\apache-tomcat-9.0.24\\webapps\\TripAppServletsAndJspPhotos");
    //Creates a new file in the uploads folder , named based on the fileName variable
    File firstPhoto = new File(uploads, trip.getFileNameOne());
    Files.copy(trip.getPhotoOne(), firstPhoto.toPath());

    File secondPhoto = new File(uploads, trip.getFileNameTwo());
    Files.copy(trip.getPhotoTwo(), secondPhoto.toPath());
}

"C: \ Users \ helloApp \ Desktop \ ApacheTomcat \ apache -tomcat-9.0.24 \ webapps \ TripAppServletsAndJspPhotos";

Это также строка, которая сохраняется как путь к файлу в базе данных. Строка в точности такая, только дополнительно содержит соответствующее имя файла. Итак, в столбце базы данных есть что-то вроде этого:

C:\Users\helloApp\Desktop\ApacheTomcat\apache-tomcat-9.0.24\webapps\TripAppServletsAndJspPhotos\summer.jpg

Теперь в java у меня есть модель, которая содержит строковое поле для этого местоположения. Таким образом, данные из таблицы извлекаются, объект создается, и все данные отображаются в jsp соответственно, кроме фотографий, которые отображают путь.

Сначала я попытался добавить тег img sr c от html и используйте EL для извлечения строки из бэкэнда для отображения фотографии. Мой jsp при этом выглядел так:

<%@ page import="java.util.List,com.example.model.Trip,java.io.InputStream,java.time.LocalDate" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<body>
<%
  if(session.getAttribute("username").equals(null))
      response.sendRedirect("welcome.jsp");
%>

<h1>YOU ARE LOGGED IN ${username}</h1>
<h1>Your id is ${userid}</h1>
<br>
<c:choose>
<c:when test="${!updateSuccess.equals(null)}">
<h3>${updateSuccess}</h3>
</c:when>
</c:choose>
<br>
<c:choose>
    <c:when test ="${trips.isEmpty()}">
        <p>Please enter some trips to view them</p>
           <br>
     </c:when>
     <c:otherwise>
<div>
<table class="container">
    <thead>
    <tr>
        <th><h1>Trip Name</h1></th>
        <th><h1>Start Date</h1></th>
        <th><h1>End Date</h1></th>
        <th><h1>Impressions</h1></th>
        <th><h1>Photo one</h1></th>
        <th><h1>Photo two</h1></th>
        <th><h1>Location</h1></th>
    </tr>
    </thead>
    <tbody>

    <c:forEach items="${trips}" var="trip">
        <tr>
            <td>${trip.name}</td>
            <td>${trip.startDate}</td>
            <td>${trip.endDate}</td>
            <td>${trip.impressions}</td>
            <td><img src="${trip.fileNameOne}"</td>
            <td><img src="${trip.fileNameOne}"</td>
            <td>${trip.location}</td>
            <td>
                <form method="POST" action="UpdateDeleteTripServlet">
                    <input type="submit" class="formButton" name="update" value="Update">
                        <input type="hidden" name="butonUpdate" value=${trip.id}>
                </form>
             </td>
             <td>
                   <form method="POST" action="UpdateDeleteTripServlet">
                   <input type="submit" id="formButtonDelete" class="formButton" name="delete" value="Delete">
                   <input type="hidden" name="butonDelete" value=${trip.id}>
                   </form>
             </td>
    </c:forEach>
    </tbody>
</table>

</div>

</c:otherwise>
</c:choose>

<a href="addtrip.jsp">Add Trip</a>

<form method="GET" action = "LogoutServlet">
<input type = "SUBMIT" value = "Log Out">
</form>

<form method="GET" action = "ProfileServlet">
<input type = "SUBMIT" value = "Profile">
</form>

</body>


</html>

Как я выяснил, эти 2 строки

<td><img src="${trip.fileNameOne}"</td>
<td><img src="${trip.fileNameOne}"</td>

отображают путь вместо отображения изображения. Хорошо, я подумал, что не так? Я проверил свой браузер, чтобы увидеть, что происходит, и в консоли я получил сообщение:

Not allowed to load local resource: file:///C:/Users/helloApp/Desktop/ApacheTomcat/apache-tomcat-9.0.24/webapps/TripAppServletsAndJspPhotos/summer.jpg

Затем я вернулся сюда Загрузка изображений из-за пределов папки webapps / webcontext / deploy с помощью или imagetag , а затем и здесь Отображение изображения из пути в базе данных (даже если его PHP, я получил некоторую полезную информацию) и обнаружил, что браузеры не могут загружать данные из локальный, поэтому я должен добавить http: // URI, чтобы браузер знал, что загрузка с сервера не с локального. Итак, я прочитал немного о файле отсюда В чем разница между URL-адресами «file: //» и «http: //» и обнаружил, что он в основном противоположен http, будучи использованным чтобы получить файл из локального.

Так что мне было интересно, как я могу изменить файл: // на http: //? Должен ли я просто добавить строку «http: //» к жестко закодированному пути в java? Как отобразить эти фотографии из той папки, которая находится внутри папки webapp, но не внутри папки развертывания WAR?

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