Question

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

这是从数据库下载图像但打开单击显示垃圾字符的thimlnail的应用程序URL。 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控制器代码，用于从数据库下载图像。

@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

我通过进行以下更改解决了问题。

@RequestMapping(value = "downloadImage.jpg", method = RequestMethod.GET)

因此，当我从downloadImage.html将URL更改为downloadImage.jpg时，模态弹出窗口能够渲染图像。

因此我们在锚标记中放置的URL需要扩展任何图像类型，例如jpg，gif等。

我的最终URL将在锚标记中变为如下，它将命中Spring MVC Controller并从db下载byte []并刷新具有byte []的缓冲区。

http://localhost:8080/insignia/downloadImage.jpg?piid=1

希望这会有所帮助。

Answer 2

您只需指定模式的数据类型，例如数据类型= “图像”

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

请参阅此处的选项了解更多http://ashleydw.github.io/lightbox/

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

2 个答案: