如何在Keystonejs后端显示上传的图像 [英] How to show uploaded image in Keystonejs back-end

问题描述

非常类似于问题此处，但我没有使用S3文件，并且该链接中的信息有些过时了(由于与上述问题相关的github问题已关闭，因此尚未更新).

Very similar to problem here but I'm not using S3 files and the info in that link is somewhat dated (hasn't been updated since github issues linked from question above were closed).

我的问题是关于如何在Keystonejs的管理后端中预览上载的图像.尽管这似乎是一个错误修复(按照上面链接中的建议编辑梯形失真校正文件)，但我想知道是否还有其他选择.

My question is about how to get a preview of an uploaded image in Keystonejs's admin back-end. Although it seems like it's a hacky fix (editing keystone files as suggested in link above) I'm wondering if there's other options.

尽管他们添加了对S3文件的支持，并且支持Types.CloudinaryImage，但当我只是上载的图像时，由于Keystone将其视为任意文件(而不是图像)，因此我无法预览上载的图像.

Although they've added support for S3 files and Types.CloudinaryImage is supported I can't get a preview of the uploaded image when it's just an uploaded image since Keystone treats it as an arbitrary file (not an image).

截图:您可以看到Keystone仅显示文件名(以红色突出显示).

Screenshot: as you can see Keystone just shows the filename (highlighted in red).

模型设置如下:

var keystone = require('keystone');
var Types = keystone.Field.Types;

/**
 * Image Upload Model
 * ==================
 * A database model for uploading images to the local file system
 */

var ImageUpload = new keystone.List('ImageUpload');

var myStorage = new keystone.Storage({
        adapter: keystone.Storage.Adapters.FS,
        fs: {
                path: keystone.expandPath('./public/uploads/images'),
                publicPath: '/public/uploads/images',
        }
});

ImageUpload.add({
        name: { type: Types.Key, index: true },
        image: {
                type: Types.File,
                storage: myStorage
        },
        createdTimeStamp: { type: String },
        url: { type: String }
});


ImageUpload.defaultColumns = 'url, createdTimeStamp, image';
ImageUpload.register();

推荐答案

现在可以在最新的梯形失真校正主分支中进行图像预览(请参见

Image previews are now possible in the latest master branch of keystone (see https://github.com/keystonejs/keystone/pull/4509). At the moment you need to depend on the git version of keystone, so put this in your package.json and run npm install:

  "keystone": "https://github.com/keystonejs/keystone.git"

在模型中，在相关图像字段上指定thumb: true.您还需要架构中的url属性.例如:

In your model, specify thumb: true on the image field in question. You also need the url property in the schema. For example:

const storage = new keystone.Storage({
    adapter: keystone.Storage.Adapters.FS,
    fs: {
        path: keystone.expandPath('./uploads/images'), 
        publicPath: '/images/'
    },
    schema: {
        url: true,
    }
})

ImageUpload.add({
    name: { type: Types.Key, index: true },
    image: {
        type: Types.File,
        storage: myStorage,
        thumb: true
    },
    createdTimeStamp: { type: String }
});

管理界面现在应该显示该图像的小预览以及指向该图像的链接.

The admin UI should now show a small preview of the image and a link to it.

这篇关于如何在Keystonejs后端显示上传的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！