spring-mvc - ekko-lightbox 在模态弹出窗口中显示垃圾字符，而不是显示实际图像。

Question

我正在使用 ekko-lightbox 在弹出窗口中显示图像，图像在缩略图中按预期显示，但是当我单击图像时，它会打开模型并显示垃圾字符。

这是从数据库下载图像的应用程序 url，但打开单击它显示垃圾字符的thimlnail。
http://localhost:8080/insignia/downloadImage.html?piid=1

即使在模型弹出窗口中，下面的链接也能正常工作。
https://lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s1024/IMG_0736%2520-%2520original.jpg

下面是我的 html 代码来显示和下载图片库和预览图片。

<c:forEach var="item" items="${form.patient.patientImages }" varStatus="status">
             <div class="container">
                <div class="row">
                    <div class="col-md-offset-1 col-md-10">
                        <div class="row">
                            <a href="http://localhost:8080/insignia/downloadImage.html?piid=1" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3">
                                <img src="http://localhost:8080/insignia/downloadImage.html?piid=1" class="img-responsive">
                            </a>
                             <a href="https://lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s1024/IMG_0736%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3">
                                <img src="https://lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s128/IMG_0736%20-%20original.jpg" class="img-responsive">
                            </a>
                             <a href="https://lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s1024/IMG_0736%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3">
                                <img src="https://lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s1024/IMG_0736%2520-%2520original.jpg" class="img-responsive">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </c:forEach>
<script type="text/javascript">
        $(document).ready(function ($) {

            // delegate calls to data-toggle="lightbox"
            $(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
                event.preventDefault();
                return $(this).ekkoLightbox({
                    onShown: function() {
                        if (window.console) {
                            return console.log('Checking our the events huh?');
                        }
                    },
                    onNavigate: function(direction, itemIndex) {
                        if (window.console) {
                            return console.log('Navigating '+direction+'. Current item: '+itemIndex);
                        }
                    }
                });
            });

            //Programatically call
            $('#open-image').click(function (e) {
                e.preventDefault();
                $(this).ekkoLightbox();
            });
            $('#open-youtube').click(function (e) {
                e.preventDefault();
                $(this).ekkoLightbox();
            });

            $(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
                event.preventDefault();
                return $(this).ekkoLightbox({
                    onShown: function() {
                        var a = this.modal_content.find('.modal-footer a');
                        if(a.length > 0) {
                            a.click(function(e) {
                                e.preventDefault();
                                this.navigateTo(2);
                            }.bind(this));
                        }
                    }
                });
            });
        });
    </script>

下面是我从数据库下载图像的 Spring Controller 代码。

@RequestMapping(value = "downloadImage.html", method = RequestMethod.GET)
public void downloadImage(@Valid @ModelAttribute("form") PatientForm form, BindingResult result, Model model, HttpServletResponse response) throws IOException {
    if (request.getParameter("piid") != null) {
        Long patientImageId = Long.valueOf(request.getParameter("piid"));
        response.setContentType("image/jpg");
        PatientImage patientImage = patientService.findImageById(patientImageId);
        OutputStream outputStream = null;
        try {
            outputStream = response.getOutputStream();
            outputStream.write(patientImage.getActualImage());
        } catch (IOException e) {
            logger.error(e.getMessage(), e);
            e.printStackTrace();
        } finally {
            outputStream.flush();
            outputStream.close();
        }
    }
}

有人可以帮我解决这个问题吗？

Answer 1

您只需要为模态指定数据类型，例如数据类型=“图像”

我遇到了同样的问题，因为我的文件没有扩展名。添加以上为我解决

更多信息请参见此处的选项 http://ashleydw.github.io/lightbox/