java - 使用 Spring MVC 和 Hibernate 在 JSP 中显示 jpg 图像列表

Question

我找了类似的问题，但有些东西没看懂。我的代码似乎也可以工作，但它显示的不是 jpg 图像，而是一些图标。如果您能帮助解决这个问题，那就太好了。

首先， 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;
}}

和我的 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>

最后它应该像一个艺术家画廊，在第一页上代表一张图片表。现在我没有任何 css，也没有搜索如何从输出中制作一个好的表格，但问题是关于图像的。看起来像:

，用图标代替图片，我想知道，为什么...

解决方案

经过评论和回答，我最终找到了解决方案。以前我试图直接传递图像，而不是作为 url 值，这似乎是一种不好的做法。这是我的案例的 Controller 中的代码:

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

还有我更新后的表格:

 <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>

Answer 1

图像不能(不应该)像 HTML 中的数据一样插入。图像应通过 URL 加载。

1. 让 HTML 变成这样:img src="/something/getImg?id=123"
2. 创建一个接受 URL“something/getImg”的 Controller 。
3. 在Controller中，使用Servlet的response.Outputstream返回Image

对于每个要显示的图像，创建一个 IMG html 元素。每个 IMG 的“src”属性将指向该图像的特定 URL:..getImage?id=111、getImage?id=112 等。 Controller 方法将查找请求参数“id”，并返回该 id 的图像.