我正在尝试使用Node和pug扩展keystonejs cms。基本上,我想添加为我上传的每个图像添加描述的功能。我目前正在将图像正确存储在mongo数据库中。但是由于某种原因,我无法使图像正确显示或无法显示数据标题。如下所示,图像ID正在被拾取但没有骰子。图像上传确实有效,并且图像存储正确,所以我认为这是我如何在哈巴狗文件中调用图像src的问题。
我有一个画廊模型,我在跟图像模型建立联系
var keystone = require('keystone'),
Types = keystone.Field.Types;
/**
* Gallery Model
* =============
*/
var Gallery = new keystone.List('Gallery', {
map: { name: 'name' },
autokey: { path: 'slug', from: 'name', unique: true }
});
Gallery.add({
name: { type: String, required: true},
published: {type: Types.Select, options: 'yes, no', default: 'no', index: true, emptyOption: false},
publishedDate: { type: Types.Date, index: true, dependsOn: { published: 'yes' } },
description: { type: Types.Textarea, height: 150 },
heroImage: { type: Types.CloudinaryImage },
images : { type: Types.Relationship, ref: 'Image', many: true }
});
Gallery.defaultColumns = 'title, published|20%, publishedDate|20%';
Gallery.register();
图像模型,它使用的是cloudinary,因为这似乎是基石所支持的/我在有效的教程中找到的内容
var keystone = require('keystone'),
Types = keystone.Field.Types;
/**
* Image Model
* ==================
*/
var Image = new keystone.List('Image', {
map: { name: 'name' },
autokey: { path: 'slug', from: 'name', unique: true }
});
Image.add({
name: { type: String, required: true },
image: { type: Types.CloudinaryImage, autoCleanup: true, required: true, initial: false },
description: { type: Types.Textarea, height: 150 },
});
Image.relationship({ ref: 'Gallery', path: 'heroImage' });
Image.relationship({ ref: 'Gallery', path: 'images' });
Image.register();
Gallery.pug
extends ../layouts/default
block intro
.container
h1 Gallery
block content
.container
if galleries.length
each gallery in galleries
h2= gallery.name
.row.gallery-images
if gallery.heroImage.exists
.col-sm-4.col-md-4.gallery-image: img(src=gallery._.heroImage.limit(680,680)).img-rounded
.col-sm-8.col-md-8: .row
each image in gallery.images
.col-xs-4.col-sm-4.col-md-3.gallery-image: a.example-image-link(href=image data-lightbox="example-set" )
img(src=image date-title=image.name).img-rounded1.exampleimage
else
each image in gallery.images
.col-xs-4.col-sm-4.col-md-3.gallery-image: a.example-image-link(href=gallery.image data-lightbox="example-set" date-title=description)
img(src=images.image).img-rounded1.exampleimage
else
h3.text-muted There are no image galleries yet.
在“实时” html中
<div class="col-xs-4 col-sm-4 col-md-3 gallery-image">
<a class="example-image-link" href="5cc494c821ed5b3770568968" data-lightbox="example-set">
<img class="img-rounded1 exampleimage">
</a>
</div>