Cómo mostrar la imagen cargada en el back-end de Keystonejs

Muy similar al problema aquí, pero no estoy usando archivos S3 y la información en ese enlace está un poco obsoleta (no se ha actualizado desde que se cerraron los problemas de github vinculados desde la pregunta anterior).

Mi pregunta es sobre cómo obtener una vista previa de una imagen cargada en el back-end de administración de Keystonejs. Aunque parece que es una corrección de hacky (edición de archivos clave como se sugiere en el enlace anterior) Me pregunto si hay otras opciones.

A pesar de que han agregado compatibilidad con los archivos S3 y Types.CloudinaryImage es compatible, no puedo obtener una vista previa de la imagen cargada cuando solo se trata de una imagen cargada, ya que Keystone la trata como un archivo arbitrario (no como una imagen).

Captura de pantalla : como puede ver, Keystone solo muestra el nombre del archivo (resaltado en rojo).

El modelo está configurado de la siguiente manera:

 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(); 

Por lo que entiendo, la única forma es implementarlo por ti mismo. No es tan aterrador como parece, pero deberías dedicar mucho tiempo a hacerlo.

Debe investigar cómo, por ahora, se muestran diferentes tipos de archivos en la página de administración; para ello, debe consultar la plantilla para la página de administración que ya se proporciona con KeystoneJS (ruta: node_modules \ keystone \ admin \ server \ templates)

Después de eso es posible que desee buscar (ruta: node_modules \ keystone \ fields) Es posible que le interese la subcarpeta TYPES – porque hay diferentes reglas de tipos de campos

Por lo tanto, su objective es encontrar la descripción del campo correspondiente (para su modelo de sistema de archivos ImageUpload) o crear una nueva con una etiqueta img para mostrar la imagen de url

Creo que el tipo de archivo es lo que estás buscando – \ node_modules \ keystone \ fields \ types \ file

Las previsualizaciones de imágenes ahora son posibles en la última twig maestra de Keystone (consulte https://github.com/keystonejs/keystone/pull/4509 ). En este momento necesita depender de la versión git de keystone, así que ponga esto en su package.json y ejecute npm install :

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

En su modelo, especifique thumb: true en el campo de imagen en cuestión. También necesita la propiedad url en el esquema. Por ejemplo:

 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 } }); 

La IU de administrador ahora debería mostrar una pequeña vista previa de la imagen y un enlace a ella.