解決したいこと
現在書籍の管理アプリを作成しており、HTMLにて画像データを登録し、SpringBootを利用して処理し、MySQLに保存した画像データを再度HTMLに表示させたいのですが、表示できず苦戦しています。
流れとしては下記の通りです。
発生しているエラー
Google Chromeのデベロッパーツールで確認すると、画像のパスは渡せています。
画像の格納方法や表示の仕方に問題があるのかなと考えているのですが、解決方法を教えていただきたいです。
html
1<!-- 書籍の一覧表示 --> 2<div class="container"> 3 <div class="row"> 4 <div class="col"> 5 <div>テスト1</div> 6 <img scr="/Users/manami/workspace/yonda/books/hanako.png" class="img-responsive img-rounded item-img-center" width="200"> 7 </div> 8 </div> 9</div>
使用しているツール
・Mac 12.1
・SpringBoot 4.12.1
ー Gradle
ー MyBatis
・MySQL 5.7.36
実際のコード(冗長になるので一部抜粋しています)
book-registraiton.html(書籍登録フォーム)
html
1<h2>書籍登録</h2> 2 <form th:action="@{/yonda/book-registration-result}" method="post" enctype="multipart/form-data" th:object="${bookRegistrationForm}"> 3 <label for="bookImg" class="text-muted">イメージ画像</label> 4 <input id="bookImg" type="file" accept="image/*" class="form-control" name="bookImg" th:field="*{bookImg}" required> 5 </div> 6 <button type="submit">登録</button> 7</form>
BookRegistrationForm.java
java
1// フィールド 2private MultipartFile bookImg; 3 4// getter/setter 5public MultipartFile getBookImg() { 6 return bookImg; 7 } 8 public void setBookImg(MultipartFile bookImg) { 9 this.bookImg = bookImg; 10 }
BookRegistrationController.java(書籍登録を行うコントローラー)
java
1@RequestMapping("/book-registration-result") 2 public String registerBook(@Validated BookRegistrationForm form, BindingResult result, MultipartFile bookImg, Model model) throws IOException { 3 4 // バリデーションチェック 5 if (result.hasErrors()) { 6 return registrationBook(model); 7 } 8 9 // 登録された画像データからファイル名を取得 10 String bookImgName = form.getBookImg().getOriginalFilename(); 11 12 File filePath = new File(bookImg.getOriginalFilename()); 13 14 // 保存先を定義 15 String uploadPath = "/Users/manami/workspace/yonda/books/"; 16 17 // アップロードファイルをバイト値に変換 18 byte[] bytes = form.getBookImg().getBytes(); 19 20 // バイト値を書き込むためのファイルを作成して指定したパスに格納 21 BufferedOutputStream stream = new BufferedOutputStream ( 22 new FileOutputStream(new File(uploadPath + filePath))); 23 24 // ファイルに書き込み 25 stream.write(bytes); 26 27 Book book = new Book(); 28 29 // formのデータをbookに書き込み 30 BeanUtils.copyProperties(form, book); 31 32 // sessionに格納されたユーザーデータを利用し、ユーザーのID情報を取得する 33 User user = (User) session.getAttribute("user"); 34 book.setBookUserId(user.getUserId()); 35 36 // 画像名とデータをドメインに渡す 37 book.setBookImgName(bookImgName); 38 book.setBookImg(Base64.encodeBase64(form.getBookImg().getBytes())); 39 40 // 書籍を登録する 41 bookRegistrationService.insertBook(book); 42 43 return "book-list"; 44 }
BookRegistrationService.java(書籍登録処理を実装)
java
1public void insertBook(Book book) { 2 bookMapper.insertBook(book); 3 }
BookMapper.java
java
1@Mapper 2public interface BookMapper { 3 4 /** 書籍登録 */ 5 public void insertBook(Book book); 6 7 /** 書籍情報の全件取得(全ユーザーの書籍情報) */ 8 public List<Book> findAll(); 9 10 /** 特定ユーザーの書籍情報を全件取得 */ 11 public List<Book> findByOne(@Param("bookUserId") Integer bookUserId); 12 13 /** 特定のユーザーの中から書籍idが一致する書籍情報の取得 */ 14 public Book findById(@Param("bookUserId") Integer bookUserId, @Param("bookId") Integer bookId); 15 16 /** 書籍名が一致する情報の取得 */ 17 public List<Book> findByName(@Param("bookUserId") Integer bookUserId, @Param("bookName") String bookName); 18 19 /** 書籍情報の更新 */ 20 public void updateBook(Book book); 21}
BookMapper.xml
xml
1<?xml version="1.0" encoding="UTF-8"?> 2<!DOCTYPE mapper 3 PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 4 "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> 5<mapper namespace="com.example.demo.repository.BookMapper"> 6 7 <resultMap type="com.example.demo.domain.Book" id="bookMapper"> 8 <id property="bookId" column="book_id"/> 9 <result property="bookName" column="book_name"/> 10 <result property="bookCategoryId" column="book_category_id"/> 11 <result property="bookPrice" column="book_price"/> 12 <result property="bookPage" column="book_page"/> 13 <result property="bookCurrentPage" column="book_current_page"/> 14 <result property="bookImgName" column="book_img_name"/> 15 <result property="bookImg" column="book_img" typeHandler="org.apache.ibatis.type.BlobTypeHandler"/> 16 <result property="bookUserId" column="book_user_id"/> 17 <result property="createAt" column="create_at"/> 18 <result property="updateAt" column="update_at"/> 19 </resultMap> 20 21 <!-- 書籍登録 --> 22 <insert id="insertBook"> 23 INSERT INTO books ( 24 book_name, 25 book_category_id, 26 book_price, 27 book_page, 28 book_img_name, 29 book_img, 30 book_user_id) 31 VALUES ( 32 #{bookName}, 33 #{bookCategoryId}, 34 #{bookPrice}, 35 #{bookPage}, 36 #{bookImgName}, 37 #{bookImg}, 38 #{bookUserId}); 39 </insert> 40 41 <!-- 書籍情報の全件取得(全ユーザーの書籍情報) --> 42 <select id="findAll" resultMap="bookMapper"> 43 SELECT 44 b.book_id, 45 b.book_name, 46 b.book_price, 47 b.book_page, 48 b.book_current_page, 49 b.book_img_name, 50 b.book_img, 51 b.book_category_id, 52 c.category_name, 53 b.book_user_id, 54 u.user_name, 55 b.create_at, 56 b.update_at 57 FROM 58 books AS b 59 JOIN 60 categories AS c 61 ON 62 b.book_category_id = c.category_id 63 JOIN 64 users AS u 65 ON 66 b.book_user_id = u.user_id 67 ORDER BY 68 book_id; 69 </select> 70 71 <!-- 特定ユーザーの書籍情報を全件取得 --> 72 <select id="findByOne" resultMap="bookMapper"> 73 SELECT 74 b.book_id, 75 b.book_name, 76 b.book_price, 77 b.book_page, 78 b.book_current_page, 79 b.book_img_name, 80 b.book_img, 81 b.book_category_id, 82 c.category_name, 83 b.book_user_id, 84 u.user_name, 85 b.create_at, 86 b.update_at 87 FROM 88 books AS b 89 JOIN 90 categories AS c 91 ON 92 b.book_category_id = c.category_id 93 JOIN 94 users AS u 95 ON 96 b.book_user_id = u.user_id 97 WHERE 98 b.book_user_id = #{bookUserId} 99 ORDER BY 100 b.book_id; 101 </select> 102 103 <!-- 特定ユーザーの中から書籍idが一致する書籍情報の取得 --> 104 <select id="findById" resultMap="bookMapper"> 105 SELECT 106 b.book_id, 107 b.book_name, 108 b.book_price, 109 b.book_page, 110 b.book_current_page, 111 b.book_img_name, 112 b.book_img, 113 b.book_category_id, 114 c.category_name, 115 b.book_user_id, 116 u.user_name, 117 b.create_at, 118 b.update_at 119 FROM 120 books AS b 121 JOIN 122 categories AS c 123 ON 124 b.book_category_id = c.category_id 125 JOIN 126 users AS u 127 ON 128 b.book_user_id = u.user_id 129 WHERE 130 b.book_user_id = #{bookUserId} 131 AND 132 b.book_id = #{bookId} 133 ORDER BY 134 b.book_id; 135 </select> 136 137 <!-- 書籍名が一致する情報の取得 --> 138 <select id="findByName" resultMap="bookMapper"> 139 SELECT 140 b.book_id, 141 b.book_name, 142 b.book_price, 143 b.book_page, 144 b.book_current_page, 145 b.book_img_name, 146 b.book_img, 147 b.book_category_id, 148 c.category_name, 149 b.book_user_id, 150 u.user_name, 151 b.create_at, 152 b.update_at 153 FROM 154 books AS b 155 JOIN 156 categories AS c 157 ON 158 b.book_category_id = c.category_id 159 JOIN 160 users AS u 161 ON 162 b.book_user_id = u.user_id 163 WHERE 164 b.book_user_id = #{bookUserId} 165 AND 166 b.book_name LIKE '%${bookName}%' 167 ORDER BY 168 b.book_id; 169 </select> 170 171 <!-- 書籍情報の更新 --> 172 <update id="updateBook"> 173 UPDATE 174 books 175 <set> 176 <if test="bookName != null"> 177 book_name = #{bookName}, 178 </if> 179 <if test="bookCategoryId != null"> 180 book_category_id = #{bookCategoryId}, 181 </if> 182 <if test="bookPrice != null"> 183 book_price = #{bookPrice}, 184 </if> 185 <if test="bookImg != null"> 186 book_img = #{bookImg}, 187 </if> 188 <if test="bookCurrentPage != null"> 189 book_current_page = #{bookCurrentPage} 190 </if> 191 </set> 192 WHERE 193 book_id = #{bookId} 194 AND 195 book_user_id = #{bookUserId}; 196 </update> 197</mapper>
book-list.html(書籍一覧を表示)
html
1<!-- 書籍の一覧表示 --> 2<div class="container"> 3 <div class="row"> 4 <div th:each="book : ${bookList}" class="col"> 5 <div th:text="${book.bookName}">書籍名</div> 6 <img th:scr="@{'/Users/manami/workspace/yonda/books/' + ${book.bookImgName}}" class="img-responsive img-rounded item-img-center" width="200"> 7 </div> 8 </div> 9</div>
BookListController.java(ユーザーごとに書籍の一覧表示をするためのコントローラー)
java
1@RequestMapping("/book-list") 2 public String bookList(MultipartFile multipartFile, Model model) throws IOException { 3 4 // ユーザーのIDを取得する 5 User user = (User)session.getAttribute("user"); 6 Integer userId = user.getUserId(); 7 8 // ユーザーIDが一致する書籍情報を取得する 9 List<Book> bookList = bookListService.findByOne(userId); 10 11 model.addAttribute("bookList", bookList); 12 13 return "book-list"; 14 }
BookListService.java
java
1public List<Book> findByOne(Integer userId) { 2 return bookMapper.findByOne(userId); 3 }
あなたの回答
tips
プレビュー