Fancybox 图片库 +斑点存储区

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 照片查看器这样的事情，在查看图像时，用户可以发表评论。由于我需要更多 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
            });