title: Display jpg image list in JSP with Spring MVC and Hibernate
body: <p>I looked for similar questions but didn't understand some things. My code also seems to work, but instead of jpg images it displays some icons. Would be great if you will help to figure it out. </p>
  
  <p>Fisrst of all, the controller:</p>
  
  <pre><code>@Controller
  public class MainController {
  
  @Autowired
  private MasterpieceService masterpieceService;
  
  @RequestMapping(value={ "/", "/home" }, method = RequestMethod.GET)
  public ModelAndView firstPage(){
      ModelAndView model = new ModelAndView();
      model.addObject("masterpiece", new Masterpiece());
      model.addObject("masterpieceList", masterpieceService.getMasterpieces());
      model.setViewName("home");
      return model;
  }
  
  (...other methods...)
  
  
      @RequestMapping(value = {"/uploadMasterpiece"}, method = RequestMethod.POST)
  public ModelAndView uploadMasterpiece(@RequestParam("name") String name,
                                        @RequestParam("file") MultipartFile file,
                                        @RequestParam("comment") String comment) {
      ModelAndView model = new ModelAndView();
  
      if(file.isEmpty()){
          // oh no.
          model.setViewName("home");
      }else {
          Masterpiece masterpiece = new Masterpiece();
          try {
              masterpiece.setName(name);
              masterpiece.setImage(file.getBytes());
              masterpiece.setComment(comment);
              masterpieceService.addMasterpiece(masterpiece);
  
              model.setViewName("admin");
          }catch (Exception e){
              e.printStackTrace();
              model.setViewName("home");
          }
      }
      return model;
  }}
  </code></pre>
  
  <p>and my JSP:</p>
  
  <pre><code>&lt;c:if test="${!empty masterpieceList}"&gt;
  &lt;table&gt;
  
      &lt;c:forEach items="${masterpieceList}" var="masterpiece"&gt;
          &lt;tr&gt;
              &lt;td&gt;${masterpiece.name},&lt;/td&gt;
              &lt;td&gt;&lt;img src="${pageContext.request.contextPath}/masterpiece/${masterpiece.image}" /&gt; &lt;/td&gt;
              &lt;td&gt;${masterpiece.comment} &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/c:forEach&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>In the end it should be like an artist gallery representing a table of images on the first page. Right now I don't have any css and didnt search how to make a good table out of the output, but the question is about images. It looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/jXUnS.jpg" alt="enter image description here"> </p>
  
  <p>, with icons instead of images, and I am wondering, why... </p>
  
  <p><strong>SOLUTION</strong></p>
  
  <p>After comments and answers, I eventually find out a solution. Previously I tried to pass images straight, not as an url values, which appears a bad practice. Here is a code in the controller for my case:</p>
  
  <pre><code>@RequestMapping(value = "/something/getImg{masterpieceId}", method = RequestMethod.GET,
          produces = MediaType.IMAGE_JPEG_VALUE)
  public ResponseEntity&lt;byte[]&gt; ListImage(@PathVariable long masterpieceId) throws IOException{
      Masterpiece m = masterpieceService.getMasterpieceById(masterpieceId);
      byte [] image = m.getImage();
      final HttpHeaders headers = new HttpHeaders();
      headers.setContentType(MediaType.IMAGE_JPEG);
      return new ResponseEntity&lt;byte[]&gt;(image, headers, HttpStatus.CREATED);
  }
  </code></pre>
  
  <p>And my updated form:</p>
  
  <pre><code> &lt;c:if test="${!empty masterpieceList}"&gt;
  &lt;table&gt;
  
      &lt;c:forEach items="${masterpieceList}" var="masterpiece"&gt;
          &lt;tr&gt;
              &lt;td&gt;${masterpiece.name},&lt;/td&gt;
              &lt;td&gt;&lt;img src="/something/getImg${masterpiece.masterpieceId}" /&gt; &lt;/td&gt;
              &lt;td&gt;${masterpiece.comment} &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/c:forEach&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>