質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • Java

    15864questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • HTML

    11530questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • PostgreSQL

    1359questions

    PostgreSQLはオープンソースのオブジェクトリレーショナルデータベース管理システムです。 Oracle Databaseで使われるPL/SQLを参考に実装されたビルトイン言語で、Windows、 Mac、Linux、UNIX、MSなどいくつものプラットフォームに対応しています。

  • Spring Boot

    727questions

    Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

DBにある画像を画面に出力したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,548

Yoshi--

score 50

コントローラー

package com.example.konkatsu.web;

import java.io.IOException;
import java.util.List;

import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.annotation.AuthenticationPrincipal;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import com.example.konkatsu.domain.Profile;
import com.example.konkatsu.service.LoginUserDetails;
import com.example.konkatsu.service.ProfileService;


@Controller
@RequestMapping("konkatsu")   //「URL」の接頭辞をkonkatsuに設定(このクラスで呼ばれたpostなどは/konkatsu/(path)となる)

public class KonkatsuController {
    @Autowired
    ProfileService profileService;

    @ModelAttribute  //@ModelAttributeを付けたメソッド内でProfileFormを初期化
    //@ModelAttributeがついたメソッドは、@PostMappingでマッピングされたメソッドの前に実行され
      //「返り値」は自動で「Model」に追加される(この例だと「list」や「create」メソッドが呼ばれる前に「model.addAttribute(new ProfileForm())」相当の処理が行われる)
     ProfileForm setUpForm() {
            return new ProfileForm();
     }



    @GetMapping   //pathの指定がない場合は URL は/konkatsu
    public String myPage(@AuthenticationPrincipal LoginUserDetails userDetails) {
        return "konkatsu/myPage";
    }


    @GetMapping(path = "profileForm")   //pathの指定がない場合は URL は/konkatsu
    String list(Model model){  //SpringMVCでは画面に値を渡す為にModelオブジェクトを使用
        List<Profile> profile = profileService.findAll();
        model.addAttribute("profile", profile);  //第一引数はThymeleafで取り出す時に使う名前、第二引数はThymeleafに渡したいオブジェクトを指定
        return "konkatsu/profileForm";   //遷移する画面の名前
    }



    //th:action="@{/konkatsu/createProfile}" の処理
    @PostMapping(path = "createProfile")   //URLが  /konkatsu/createProfile となる
    public String create(@Validated ProfileForm form, BindingResult bindingResult, Model model,
            // 送信されたフォームの入力チェックを行う為に@Validatedアノテーションを付ける。
            // これによりProfileFormに設定したBean Validationアノテーションが評価され、結果が隣の引数のBindingResultに格納される
            @AuthenticationPrincipal LoginUserDetails userDetails) throws IOException{
        //@AuthenticationPrincipalをつけることでログイン中の[LoginUserDetails]オブジェクトを取得できる

        System.out.println(form.getId());
        System.out.println(form.getName());
        System.out.println(form.getGenderId());
        System.out.println(form.getBirthday());
        System.out.println(form.getHeight());
        System.out.println(form.getOccupationId());
        System.out.println(form.getIncome());
        System.out.println(form.getText());
        System.out.println(form.getFile());

        if (bindingResult.hasErrors()){    //入力チェックの結果を確認し、エラーがある場合は一覧画面表示に戻る
            System.out.println("エラー");
            return list(model);
        }


        Profile profile = new Profile();
        profile.setId(form.getId());
        profile.setName(form.getName());
        profile.setGenderId(form.getGenderId());
        profile.setBirthday(form.getBirthday());
        profile.setHeight(form.getHeight());
        profile.setOccupationId(form.getOccupationId());
        profile.setIncome(form.getIncome());
        profile.setText(form.getText());
        MultipartFile uploaded = form.getFile();
        byte[] image = uploaded.getBytes();   //アップロードファイルをbyte配列で取得
        profile.setImage(image);

        BeanUtils.copyProperties(form, profile);//ProfileFormをProfileにコピーする
        profileService.create(profile, userDetails.getUser());   //ProfileをDBに追加する  (ログインユーザー情報も)

        return "/konkatsu/profileConfirm";

    }

    @GetMapping(path = "manList")   //pathの指定がない場合は URL は/konkatsu
    String manList(@RequestParam Integer id, Model model){  //htmlからidとして送られた値を@RequestParamにて取得SpringMVCでは画面に値を渡す為にModelオブジェクトを使用
        List<Profile> profile = profileService.findUser(id);
        model.addAttribute("profile", profile); //第一引数はThymeleafで取り出す時に使う名前、第二引数はThymeleafに渡したいオブジェクトを指定
        return "konkatsu/profileList";   //遷移する画面の名前
    }

    @GetMapping(path = "myProfile")   //pathの指定がない場合は URL は/konkatsu
    String MyList(@RequestParam Integer id, Model model){  //SpringMVCでは画面に値を渡す為にModelオブジェクトを使用
        Profile profile = profileService.findOne(id);
        model.addAttribute("profile", profile);  //第一引数はThymeleafで取り出す時に使う名前、第二引数はThymeleafに渡したいオブジェクトを指定
        return "konkatsu/myProfile";   //遷移する画面の名前
    }

}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>婚活サイト</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css}"/>
</head>

<body th:with="user=${#authentication.principal.user}">
   <!-- authenticationで認証ユーザー情報にアクセスできる 、principalプロパティでUserDetailsオブジェクトにアクセスできるので、user.mailでログインユーザー名が分かる-->

    <h2>
        <span th:text="${user.mail}">メアド</span>
          さん、Myプロフィール
    </h2>


 <table class="table table-striped table-bordered table-condensed">

        <tr>
        <th>名前</th>
        <th>性別</th>
        <th>誕生日</th>
        <th>身長(cm)</th>
        <th>職業</th>
        <th>年収(万円)</th>
        <th>自己紹介</th>
        <th>メールアドレス</th>
        <th>画像</th>
        </tr>


             <tr>

            <td th:text="${profile.name}">山田</td>
            <td th:text="${profile.gender.gender}">山田</td>
            <td th:text="${profile.birthday}"></td>
            <td th:text="${profile.height}"></td>
            <td th:text="${profile.occupation.occupationName}"></td>
            <td th:text="${profile.income}"></td>
            <td th:text="${profile.text}"></td>
            <td th:text="${profile.user.mail}">duke</td>  <!-- 「profile」オブジェクトがもつ「user」の「mail」を表示 -->

----------------------------------
            <td> <img th:src="${profile.image}"/></td>
-----------------------------------
        </tr>
    </table>




     <form  th:action="@{/konkatsu/manList}" method="get">
    <input type="hidden" name="id" th:value="${profile.genderId}" />
    <button type="submit" class="btn btn-lg btn-primary btn-block">登録ユーザー一覧を見る</button>
    </form>


    <form th:action="@{/logout}" method="post">
    <input type="submit" class="btn btn-lg btn-primary btn-block" value="ログアウト" />
    </form>

</body>
</html>

イメージ説明

MultipartFileで取得した画像を
byte[] image = uploaded.getBytes(); 
でバイト配列にしDBに保存しました

そのDBにある画像データを画面上に表示したいです

<td> <img th:src="${profile.image}"/></td>

とコントローラーを書き加えると思うのですが

Base64形式にして出力する方法があると思いますが
具体的にどこを直せば良いのでしょうか??

追加した方が良いクラスがありましたら
教えてください!!!!

お願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

画像ファイルをBASE64形式でエンコードしていないようですし、画像を表示するimgタグもBASE64でエンコードされた画像を出力できるように記述していないので、表示されません。

例えば、

Resource resource = resourceLoader.getResource("classpath:sample.png");
byte[] image = FileUtils.readFileToByteArray(resource.getFile());

String encodedImage = Base64.getEncoder().encodeToString(image);

mnv.addObject("image", encodedImage);

と、BASE64化した画像(対象画像はpng形式を想定)を image の名前でModelAndViewへ格納した場合、

<img src="sample.jpg" th:src="${'data:image/png;base64,' + image}"/>

とすれば表示はされるでしょう。

ただしBASE64形式で表示する画像ファイルについてはレスポンスするHTMLに含まれるため、サイズが数キロバイト程度のものに留めておくべきでしょうか。


参考サイト:
小さい画像をbase64をかけてhtml内に埋め込み
Java 8 より導入された java.util.Base64 の利用デモ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/14 15:43

    A-pZさんありがとうございます!
    参考にさせていただきます。ありがとうございます!!!

    キャンセル

同じタグがついた質問を見る

  • Java

    15864questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • HTML

    11530questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • PostgreSQL

    1359questions

    PostgreSQLはオープンソースのオブジェクトリレーショナルデータベース管理システムです。 Oracle Databaseで使われるPL/SQLを参考に実装されたビルトイン言語で、Windows、 Mac、Linux、UNIX、MSなどいくつものプラットフォームに対応しています。

  • Spring Boot

    727questions

    Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。