Короче говоря: я создал приложение, в котором пользователь может добавлять фотографии в базу данных, а также просматривать их позже. Путь к фотографиям сохраняется в БД, а фактические фотографии сохраняются в папке на локальном хосте. Приложение работало до тех пор, пока мне не пришлось показывать фотографии пользователю. Вот где я застрял. Я использую java EE, Servlet, mysql, html, jsp и css.
После прочтения этого поста здесь Загрузка изображений извне webapps / webcontext / deploy использование папки или тег , я решил 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 с помощью или tag , а затем и здесь Отображение изображения из пути в базе данных (даже если его PHP, я получил некоторую полезную информацию) и обнаружил, что браузеры не могут загружать данные из локальный, поэтому я должен добавить http: // URI, чтобы браузер знал, что загрузка с сервера не с локального. Итак, я прочитал немного о файле отсюда В чем разница между URL-адресами «file: //» и «http: //» и обнаружил, что он в основном противоположен http, будучи использованным чтобы получить файл из локального.
Так что мне было интересно, как я могу изменить файл: // на http: //? Должен ли я просто добавить строку «http: //» к жестко закодированному пути в java? Как отобразить эти фотографии из той папки, которая находится внутри папки webapp, но не внутри папки развертывания WAR?