게시판 첫번째 이미지 썸네일 만들기

1. 게시글의 html을 파싱하기 위해 java의 html 파싱 도구인 jsoup 라이브러리를 사용한다.
2. 파싱한 이미지 태그의 src 요소를 모델에 담아서 출력한다.
3. 사용자가 이미지를 등록하지 않았을 경우 디폴트 이미지가 자동 등록된다.

board/list.jsp

board/detail.jsp

pom.xml

<dependency>
 		<groupId>org.jsoup</groupId>
 		<artifactId>jsoup</artifactId>
 		<version>1.14.3</version>
</dependency>

controller

// 게시글 목록보기 
@GetMapping("/board")
public String home(Model model, 
		@PageableDefault(page = 0, size = 3, sort = "id", direction = Sort.Direction.DESC) Pageable page,
		@RequestParam(required = false, defaultValue = "") String searchText) {
	Page<Board> boardsEntity = boardService.게시글목록보기(page, searchText);
	Iterator<Board> it = boardsEntity.iterator();

	while(it.hasNext()) {
		Board boardEntity = it.next();

		//Jsoup를 이용해서 첫번째 img의 src의 값을 팡싱한 후 값을 저장
		Document doc = Jsoup.parse(boardEntity.getContent());
		if(doc.selectFirst("img") != null) {
			String src = doc.selectFirst("img").attr("src");
			boardEntity.setContent(src);
		}
	}
	
	int startPage = Math.max(1, boardsEntity.getPageable().getPageNumber() - 4);
	int endPage = Math.min(boardsEntity.getTotalPages(), boardsEntity.getPageable().getPageNumber() + 4);
	int nowPage = boardsEntity.getPageable().getPageNumber() + 1;
	model.addAttribute("startPage", startPage);
	model.addAttribute("endPage", endPage);
	model.addAttribute("nowPage", nowPage);
	model.addAttribute("boardsEntity", boardsEntity);
	return "board/list";
}

html

<c:forEach var="board" items="${boardsEntity.content}">
	<!-- 카드 글 시작 -->
	<div class="card d-flex flex-row align-items-center overflow-hidden" style="height:150px;">
		<div class="card-image w-25 ">
			<img class="card-img-top h-auto" src="${board.content}" alt="Card image cap" onerror="this.src='/image/default-image.png'">
		</div>
		<div class="card-body">
		<!-- el표현식은 변수명을 적으면 자동으로 get함수를 호출해준다. -->
			<h4 class="card-title">${board.title}</h4>
			<a href="/board/${board.id}" class="btn btn-primary">상세보기</a>
		</div>
	</div>
	<br>
	<!-- 카드 글 끝 -->
</c:forEach>코드를 입력하세요