thymeleafでデータベースから画像を取得したい

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4    <meta charset="utf-8"/>
5    <title>プロフィール一覧</title>
6  </head>
7<body>
8<table>
9	<tr th:each="profile : ${profile}">
10		<td th:text="${profile.name}"> 山田花子</td>
11		<td th:text="${profile.birthday}"> 1999-01-09</td>
12		<td th:text="${profile.height}"> 178</td>
13		<td th:text="${profile.occupationId}"> 仮</td>
14		<td th:text="${profile.income}"> 仮</td>
15		<td th:text="${profile.text}"> 仮</td>
16		<td th:src="${profile.image}"> 仮</td>
17		<td>
18
19			<form th:action="@{/profile/edit}" method="get">
20				<input type="submit" name="form" value="編集" />
21				<input type="hidden" name="userId" th:value="${profile.userId}" /> 
22			</form>
23
24		</td>
25	</tr>
26</table>
27</body>
28</html>

java
1package com.example.konkatsu.domain;
2
3import java.sql.Date;
4
5import javax.persistence.Entity;
6import javax.persistence.GeneratedValue;
7import javax.persistence.Id;
8import javax.persistence.Table;
9import javax.validation.constraints.NotNull;
10
11import lombok.AllArgsConstructor;
12import lombok.Data;
13import lombok.NoArgsConstructor;
14
15@Data
16@NoArgsConstructor    //デフォルトコンストラクタも必要な場合
17@AllArgsConstructor   //すべてのフィールドを引数に持つコンストラクタを自動生成
18@Entity    //エンティティ（一単位として扱われるデータのまとまり）であることを示す。指定したクラス名がテーブルとマッピングされる
19@Table(name = "profile")  //接続するテーブルを指定
20public class Profile {
21	@Id   //主キー
22	@GeneratedValue   //自動採番される
23	private Integer userId;
24	@NotNull
25	private Integer genderId;
26	@NotNull
27	private String name;
28	@NotNull
29	private Date birthday;
30	@NotNull
31	private Integer height;
32	@NotNull
33	private Integer occupationId;
34	@NotNull
35	private Integer income;
36	@NotNull
37	private String text;
38	@NotNull
39	private byte[] image;
40
41}
42

この場合htmlから

<td th:src="${profile.image}"> 仮</td> ここでデータベースから画像データを取り込みたいのですが表示されません

他のnameなどは表示されます
データベースにちゃんと画像データは入っています

どなたか教えていただけないでしょうか？？

行動規範の内容に同意します

回答2件

th:src属性にはURLを指定するもので、画像のバイナリデータをそのまま渡しても表示はできません。

投稿2017/07/03 04:10

A-pZ

総合スコア12011

Yoshi--

2017/07/03 04:11

どのようにすれば表示できるようになるのでしょうか？？

A-pZ

2017/07/03 04:19

private byte[] image; に対して、<td th:src="${profile.image}"> 仮</td> と書かれていますが、まず、imageフィールドには画像ファイルの何が入っているのでしょうか？ URLならStringにすべきでしょうし、画像のバイナリであればURLにした方がいいでしょう。そして出力されたHTMLをブラウザの開発者モード(F12)で確認し、実際に取得しようとしている画像のURLが正しいのかを確認しましょう。

行動規範の内容に同意します

ベストアンサー

データベースの画像フィールドには何が入っているのでしょうか？

もし画像ファイルへのパスが入っているのであれば、サーバ上から見える位置にマップして参照します。
もし blob 等に画像がまま入っているのであれば、そのバイナリをサーブする処理(IDを貰ってDBを引いてバイト配列を返す処理)を書く必要があります。

投稿2017/07/03 04:07

mattn

総合スコア5030

Yoshi--

2017/07/03 04:09

ありがとうございますデータベースには画像ファイルへのパスが入っています

mattn

2017/07/03 04:40

おそらくローカルのパスが入っているので、まずはそれをウェブサーバ経由で見える様にする必要があります。例えば実際のファイルパス: /work/001/002/image.png ウェブ上で見せるパス: /images/001/002/image.png この様に見せる必要があります。もし nginx や apache をフロントに立てておられるならそちらの設定で行った方が楽です。もしフロントにサーバを設けておられないならば、以下の様にマッピングしてやる必要があります。 @Configuration @EnableWebMvc public class WebMvcConfig extends WebMvcConfigurerAdapter { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/images/**").addResourceLocations("/work"); } } ここは出来ればドキュメントを参照して下さい。

行動規範の内容に同意します

あなたの回答