CODEWITHSUNDEEP
javaspringhibernatejspspring-mvc
St.running
St.running

Reputation: 185

Display jpg image list in JSP with Spring MVC and Hibernate

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.

Fisrst of all, the controller:

@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;
}}

and my JSP:

<c:if test="${!empty masterpieceList}">
<table>

    <c:forEach items="${masterpieceList}" var="masterpiece">
        <tr>
            <td>${masterpiece.name},</td>
            <td><img src="${pageContext.request.contextPath}/masterpiece/${masterpiece.image}" /> </td>
            <td>${masterpiece.comment} </td>
        </tr>
    </c:forEach>
</table>

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:

enter image description here

, with icons instead of images, and I am wondering, why...

SOLUTION

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:

@RequestMapping(value = "/something/getImg{masterpieceId}", method = RequestMethod.GET,
        produces = MediaType.IMAGE_JPEG_VALUE)
public ResponseEntity<byte[]> 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<byte[]>(image, headers, HttpStatus.CREATED);
}

And my updated form:

 <c:if test="${!empty masterpieceList}">
<table>

    <c:forEach items="${masterpieceList}" var="masterpiece">
        <tr>
            <td>${masterpiece.name},</td>
            <td><img src="/something/getImg${masterpiece.masterpieceId}" /> </td>
            <td>${masterpiece.comment} </td>
        </tr>
    </c:forEach>
</table>

Upvotes: 3

Views: 3279

Answers (2)

Mecon
Mecon

Reputation: 997

Images can't be (shouldn't be) inserted like data in HTML. An Image should be loaded by a URL.

  1. Make HTML be like this: img src="/something/getImg?id=123"
  2. Create a controller that accepts URL "something/getImg".
  3. In the Controller, return the Image by using Servlet's response.Outputstream

For each image you want to display, create an IMG html element. Each IMG's "src" attribute will point a specific URL for that image: ..getImage?id=111 , getImage?id=112, etc. The controller method will look for request parameter "id", and return the Image for that id.

Upvotes: 3

kodeally
kodeally

Reputation: 15

The broken image means the url to the image is wrong. Can you tell us what the value of href is for this image in your page.

Upvotes: 2

Related Questions