[SPRING] thymeleaf spring framework (maven 사용)의 로컬 디렉토리에서 이미지 삽입

thymeleaf spring framework (maven 사용)의 로컬 디렉토리에서 이미지 삽입

이 링크를 사용하여 프로젝트를 개발했습니다 : https://spring.io/guides/gs/serving-web-content/ 위 프로젝트를 개발하기 위해 maven을 사용했습니다.

이 아래에 두 개의 html 파일이 있습니다. abc.html 및 xyz.html. html 페이지에 이미지를 삽입하려면 다음과 같이 url을 사용했습니다.

<img src="https://example.com/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px">

하지만 대신 내 서버에있는 이미지 파일을 사용하고 싶습니다. 파일을 html 파일과 같은 디렉토리에 배치하려고했지만 작동하지 않습니다. 나는 완전한 길을 주려고했지만 아무 쓸모가 없었습니다. 이것은 우분투 OS입니다. 제발 도와주세요. 기본 경로를 구성 할 수있는 곳이 있습니까? 기본적으로 로컬 폴더에서 이미지를 가져 오는 방법은 기본적으로 제공됩니다.

해결법

1. ==============================

   1.Thymeleaf의 표준 URL 구문 문서, 특히 문맥 관련 및 서버 상대 URL 패턴에 대해 살펴 보시기 바랍니다.

   Thymeleaf의 표준 URL 구문 문서, 특히 문맥 관련 및 서버 상대 URL 패턴에 대해 살펴 보시기 바랍니다.

   문맥 관련 URL :

   JB Nizet이 웹 앱 프로젝트에서 개인적으로 thymeleaf를 사용함에 따라 다음과 같이 작동합니다.

   <img th:src="@{/images/test.png}"/>
   

   test.png는 webapp 폴더 내부의 프로젝트 루트 아래에 있어야합니다. 대략 훑어 보는 것,

   Myapp->webapp->images->test.png
   

   예 :

   <img th:src="@{/resources/images/Picture.png}" />
   

   다음 형식으로 출력 :

   <img src="/resources/image/Picture.png" />
   

   브라우저에서 http : // localhost : 8080 / myapp / resources / images / Picture.png를 클릭하면 위의 구문이 작동하도록 이미지에 액세스 할 수 있어야합니다. 그리고 당신의 resources 폴더는 아마 당신의 어플리케이션의 webapp 폴더 밑에있을 것입니다.

   서버 상대 URL :

   통사론:

   <img th:src="@{~/billing-app/images/Invoice.png}">
   

   다음 형식으로 출력 :

   <a href="/billing-app/showDetails.htm">
   

   위의 이미지는 컨텍스트와 다른 응용 프로그램에서로드되며 billing-app 응용 프로그램이 서버에있는 경우로드됩니다.

   출처 : Thymeleaf 설명서

2. ==============================

   2.HTTP 작동 방식을 이해해야합니다. 브라우저가 URL에 페이지를로드 할 때

   HTTP 작동 방식을 이해해야합니다. 브라우저가 URL에 페이지를로드 할 때

   http://some.host/myWebApp/foo/bar.html
   

   HTML 페이지에는

   <img src="images/test.png"/>
   

   브라우저는 이미지를로드하기 위해 서버에 두 번째 HTTP 요청을 보냅니다. 이미지의 URL은 상대 경로이므로 http://some.host/myWebApp/foo/images/test.png가됩니다. 절대 경로는 페이지의 현재 "디렉토리"에서 구성되며 이미지의 상대 경로와 연결됩니다. 서버 측 JSP 또는 thymeleaf 템플릿의 경로는 여기서는 전혀 관련이 없습니다. 중요한 것은 브라우저의 주소 표시 줄에 표시된대로 페이지의 URL입니다. 이 URL은 일반적인 Spring MVC 애플리케이션에서 초기 요청이 전송 된 컨트롤러의 URL이다.

   이미지 경로가 절대 경로 인 경우 :

   <img src="/myWebApp/images/test.png"/>
   

   브라우저는 URL http://some.host/myWebApp/images/test.png에 두 번째 요청을 보냅니다. 브라우저는 웹 서버의 루트에서 시작하여 절대 경로를 연결합니다.

   이미지를 참조 할 수 있으려면 페이지의 URL이 정확해야하므로 절대 경로가 더 선호되고 사용하기 쉽습니다.

   위의 예에서 / myWebApp는 응용 프로그램의 컨텍스트 경로이며 변경 될 수 있기 때문에 일반적으로 경로에서 하드 코드하지 않으려합니다. 고맙게도, thymeleaf 문서에 따르면, thymeleaf는 그것을 이해하고 context-relative 경로 구문을 제공하므로 /images/test.png와 같은 경로를 /myWebApp/images/test.png로 변환합니다. 그래서 당신의 이미지는 다음과 같이 보일 것입니다.

   <img th:src="@{/images/test.png}"/>
   

   (나는 thymeleaf를 한번도 사용하지 못했지만, 그것이 문서에서 추론 한 것입니다.)

   그리고 test.png 이미지는 webapp의 루트 아래에있는 폴더 이미지에 있어야합니다.

3. ==============================

   3.인터넷에 연결하십시오 :

   인터넷에 연결하십시오 :

   String src = "https://example.com/image.jpg";
   

   HTML :

from https://stackoverflow.com/questions/29460618/inserting-an-image-from-local-directory-in-thymeleaf-spring-framework-with-mave by cc-by-sa and MIT license