Spring 일지 #33 (20210914) 화면 구현(이미지 출력)
33. home 화면에 이미지 출력
-이미지 출력
*저장소 수정(ItemImageRepository.java)
... ....
//물품별 고유한 번호 가져오기
@Query(value = "select DISTINCT(item) item from ITEMIMAGE", nativeQuery = true)
List<ItemProjection2> queryDistinctItem();
*entity 생성(ItemProjection2.java)
package com.example.entity;
public interface ItemProjection2 {
Long getItem();
}
*HomeController.java 수정
**item_image_preview 추가(HomeController.java)
**SellerController 에서 'item_image_preview' 를 copy한다.
// <img src="/seller/item_image_preview?itemno=14&idx=1)"
@GetMapping(value = "/item_image_preview")
public ResponseEntity<byte[]> itemImagePreview(@RequestParam("itemno") long no, @RequestParam("idx") int idx) {
List<ItemImage> list = iiRepository.findByItem_No(no);
ItemImage itemImage = list.get(idx);
HttpHeaders headers = new HttpHeaders();
if (itemImage.getImagetype().equals("image/jpeg")) {
headers.setContentType(MediaType.IMAGE_JPEG);
} else if (itemImage.getImagetype().equals("image/png")) {
headers.setContentType(MediaType.IMAGE_PNG);
} else if (itemImage.getImagetype().equals("image/gif")) {
headers.setContentType(MediaType.IMAGE_GIF);
}
ResponseEntity<byte[]> response = new ResponseEntity<>(itemImage.getImage(), headers, HttpStatus.OK);
return response;
}
*home get 수정(HomeController.java)
**방법 1. 이미지 저장소를 이용해 이미지 표시(item 정보 표시 불가능)
**저장소 추가, home get 수정(HomeController.java)
... ...
@Autowired
ItemImageRepository iiRepository;
... ...
// http://127.0.0.1:8080/ROOT/
// http://127.0.0.1:8080/ROOT/home
@RequestMapping(value = { "/", "/home" }, method = RequestMethod.GET)
public String home(Model model, Authentication auth) {
//고유한 물품번호
List<ItemProjection2> list = iiRepository.queryDistinctItem();
model.addAttribute("list", list);
return "home"; // home.jsp를 표시
}
@RequestMapping(value = "/page403", method = RequestMethod.GET)
public String home() {
return "page403"; // page403.jsp
}
*jsp 수정(home.jsp)
**이미지는 로그인 유무에 상관없이 나타나도록 한다.
<hr />
<th:block th:each="obj, idx : ${list}">
<img th:src="@{/item_image_preview(itemno=${obj.item}, idx=0)}" width="50px" height="50px" />
<th:block th:if="${idx.count % 3 == 0}" >
<hr />
</th:block>
</th:block>
*화면 확인
**방법 2. item 저장소를 이용해 이미지 표시(item 정보 표시 가능)
**저장소 추가, home get 수정(HomeController.java)
... ...
@Autowired
ItemRepository iRepository;
... ...
// http://127.0.0.1:8080/ROOT/
// http://127.0.0.1:8080/ROOT/home
@RequestMapping(value = { "/", "/home" }, method = RequestMethod.GET)
public String home(Model model, Authentication auth) {
List<Item> list = iRepository.findAll();
model.addAttribute("list", list);
return "home"; // home.jsp를 표시
}
@RequestMapping(value = "/page403", method = RequestMethod.GET)
public String home() {
return "page403"; // page403.jsp
}
*jsp 수정(home.jsp)
**이미지는 로그인 유무에 상관없이 나타나도록 한다.
... ...
<hr />
<th:block th:each="obj, idx : ${list}">
<div th:text="${obj.name}" style="display:inline-block"></div>
<div th:text="${obj.price}" style="display:inline-block"></div>
<img th:src="@{/item_image_preview(itemno=${obj.no}, idx=0)}" width="50px" height="50px" />
<th:block th:if="${idx.count % 3 == 0}" >
<hr />
</th:block>
</th:block>
... ...
*화면 확인
