이미지 파일 불러오기(select-image)(resourses)
2024. 6. 20. 14:35ㆍJSP+Spring Boot
Pig-Mapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.khmall.mapper.PigMapper">
<!-- 모든 돼지 정보 가져오기 -->
<select id="getAllPigs" resultType="com.khmall.dto.Pig">
select * from pigs
</select>
<!-- 돼지 상세 보기. ById : id 값으로 돼지정보를 get 함
parameterType = 자료형. id의 자료형이 무엇인지 작성
-->
<select id="getPigById" resultType="com.khmall.dto.Pig" parameterType="int">
select * from pigs
where pig_id = #{pig_id}
</select>
</mapper>
--------------------------------------------------------------------------------------------------------------
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>돼지 정보 보기</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>돼지 목록</h1>
<table>
<thead>
<tr>
<th>이미지</th>
<th>이름</th>
<th>상세보기</th>
</tr>
</thead>
<tbody>
<!-- model.addAttribute("pigList", pigList); -->
<tr th:each="p : ${pigList}">
<td>
<img th:src="@{${p.pig_image_path}}">
</td>
<td th:text="${p.pig_name}"></td>
<td>
<a th:href="@{'/pigDetail/' + ${p.pig_id}}">이동하기</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
----------------------------------------------------------------------------------------------------------------
pigDetail
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>상세 보기</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>상세 보기</h1>
<div class="container">
<!-- "" 안에 ''로 작성하는 공간 : 글자로 띄워주는 공간. 변수의 영향을 받지 않음 -->
<h1 th:text="${pig.pig_name} + '상세 정보'"></h1>
<div class="detail">
<img th:src="@{${pig.pig_image_path}}">
</div>
<div class="detail">
<span th:text="${pig.pig_name}"></span>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
style.css
table{
width: 50%;
border-collapse: collapse;
}
th,td{
padding: 10px;
border: 1px solid #ddd;
}
img{
width: 50%;
height: auto;
}
.container{
width: 50%;
margin: 0 auto;
padding:20px;
background-color: #fff;
border-radius:8px;
box-shadow: 0 2px 3px yellow;
}
.detail{
margin-bottom: 10px;
}
.detail img{
width: 300px;
height: auto;
border-radius: 15px;
}
'JSP+Spring Boot' 카테고리의 다른 글
| 로그인 (0) | 2024.06.25 |
|---|---|
| 이미지 파일 업로드하기(insert-image) (0) | 2024.06.21 |
| 이미지 파일 불러오기(select-image)(java) (0) | 2024.06.20 |
| 과자와 회사 정보 모두 가져오기 + 과자 하나 상세보기(join) (java) (0) | 2024.06.20 |
| 과자와 회사 정보 모두 가져오기 + 과자 하나 상세보기(join) (resources) (0) | 2024.06.20 |