|
11 | 11 | rel="stylesheet" |
12 | 12 | integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" |
13 | 13 | crossorigin="anonymous"> |
14 | | -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> |
| 14 | +<link rel="stylesheet" |
| 15 | + href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> |
15 | 16 | <link rel="stylesheet" href="css/style.css"> |
16 | 17 | </head> |
17 | 18 | <body class="bg-body-tertiary"> |
|
54 | 55 | </c:choose> |
55 | 56 | <div class="card-body"> |
56 | 57 | <h5 class="card-title">${blog.title}</h5> |
57 | | - <p class="card-text date-icon"><i class="bi bi-clock"></i>${blog.createdAt}</p> |
| 58 | + <p class="card-text date-icon"> |
| 59 | + <i class="bi bi-clock"></i>${blog.createdAt}</p> |
58 | 60 | <button type="button" class="btn btn-primary" |
59 | 61 | data-bs-toggle="modal" data-bs-target="#modal${blog.id}"> |
60 | 62 | 記事表示</button> |
61 | 63 |
|
62 | 64 | <!-- モーダルの設定 --> |
63 | 65 | <div class="modal fade" id="modal${blog.id}" tabindex="-1" |
64 | 66 | aria-labelledby="exampleModalLabel"> |
65 | | - <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> |
| 67 | + <div |
| 68 | + class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> |
66 | 69 | <div class="modal-content"> |
67 | 70 | <div class="modal-header"> |
68 | 71 | <h1 class="modal-title fs-5" id="exampleModalLabel">${blog.title}</h1> |
69 | 72 | <button type="button" class="btn-close" |
70 | 73 | data-bs-dismiss="modal" aria-label="閉じる"></button> |
71 | 74 | </div> |
72 | 75 | <div class="modal-body"> |
73 | | - <p class="card-text">${blog.content}</p> |
| 76 | + <c:choose> |
| 77 | + <c:when test="${empty blog.imageUrl}"> |
| 78 | + <img |
| 79 | + src="${pageContext.request.contextPath}/images/dummy.png" |
| 80 | + class="card-img-top custom-img" alt="No Image"> |
| 81 | + </c:when> |
| 82 | + <c:otherwise> |
| 83 | + <img |
| 84 | + src="${pageContext.request.contextPath}/${blog.imageUrl}" |
| 85 | + class="card-img-top custom-img" alt="${blog.title}"> |
| 86 | + </c:otherwise> |
| 87 | + </c:choose> |
| 88 | + <p class="card-text mt-3">${blog.content}</p> |
74 | 89 | </div> |
75 | 90 | <div class="modal-footer"> |
76 | | - <p class="date-icon"><i class="bi bi-clock"></i>${blog.createdAt}</p> |
| 91 | + <p class="date-icon"> |
| 92 | + <i class="bi bi-clock"></i>${blog.createdAt}</p> |
77 | 93 | </div> |
78 | 94 | <!-- /.modal-footer --> |
79 | 95 | </div> |
|
0 commit comments