Fancybox图库+ Blobstore

Question

为了从blobstore中检索图像，我通常会执行以下操作并运行：

<img src="/image?blob_key={{ blob_key }}"></img>

据我读到fancybox并亲自尝试过：

$("a[rel=photo_collections]").fancybox({
'transitionIn'      : 'none',
'transitionOut'     : 'none',
});

<a rel="photo_collections" href="/image/photo.png"> Photos </a>
<a rel="photo_collections" href="/image/photo2.png"> Photos </a>

如果我在文件夹中有图像，则上面的图库可以使用。

所以，我的问题是如果我想从Blobstore而不是文件夹中检索图像？

所以，我试过跟着它不起作用：

$("a[rel=photo_collections]").fancybox({
'transitionIn'      : 'none',
'transitionOut'     : 'none',
});

<a rel="photo_collections" href="/image/photo.png"> Photos </a>
<a rel="photo_collections" href="/image/photo2.png"> Photos </a>

// This part, the fancybox works but it doesn't display the image correctly. All it shows were some sort of binary data instead of image
<a rel="photo_collections" href="/image?blob_key={{ blob_key }}"            

因此，我在这里有两个主要问题：

1. 如何解决上述问题？
2. 如果我想做Google Plus / Facebook Photo Viewer这样的事情，那么在查看图像的同时，用户可以发表评论。这是否需要HTML内容库而不仅仅是图像库，因为我需要更多HTML表单控件？

修改

以下是提供从Blobstore检索的图像的处理程序：

class RemoteDisplayImageHandler(blobstore_handlers.BlobstoreDownloadHandler):
    def get(self):

    blob_key = self.request.GET.get('blob_key', None)
    blob_info = blobstore.BlobInfo.get(blob_key)

    logging.debug('blob_key=%s', blob_key)
    logging.debug('blob_info=%s', blob_info)

    if not blob_info:
        raise Exception('Blob Key does not exist')

    self.send_blob(blob_info)

Answer 1

听起来您的图片处理程序返回了错误的内容类型。确保在响应中正确设置Content-Type标题。

Answer 2

使用替代方案解决：

            options.push({
                    'href'  : 'image_url',
                    'class' : 'iframe'
                });

            $.fancybox(options, {
                'padding'           : 0,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'image',
                'changeFade'        : 0
            });