从pug文件(在Keystonejs cms内)调用存储在mongo db中的文件

时间:2019-04-27 18:36:21

标签: node.js keystonejs

我正在尝试使用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>

0 个答案:

没有答案