在撇号 css 小部件中显示图像时出现问题

Question

我无法显示通过撇号小部件上传的图像。具体来说，我正在创建一个 'hero' 小部件，其中包含图像顶部的背景图像、标题和描述文本。该小部件似乎工作正常，因为我可以在其中添加标题和描述文本，但图像不显示。我在命令行中看到的错误是：

'Template warning: Impossible to retrieve the attachment url since it is missing, a default icon has been set. Please fix this ASAP!'

index.js 小部件：

module.exports = {
    extend: 'apostrophe-widgets',
    name: 'heroimage',
    label: 'Hero Image',
    addFields: [
        {
            name: 'hero-image',
            label: 'Hero Image',
            type: 'attachment',
            widgetType: 'apostrophe-images',
            required: true,
            extensions: [ 'jpg', 'png' ],
            extensionMaps: {
              jpeg: 'jpg'
            },
            // uploadfs should treat this as an image and create scaled versions
            image: true,
            options: {
                minSize: [ 1280, 900 ],
                limit: 1,
            }
        },
        {
            name: 'hero-title',
            label: 'Hero Title',
            type: 'area',
            options: {
                widgets: {
                    'apostrophe-rich-text': {
                    controls: [ 'Bold', 'Italic', 'Link', 'Unlink' ]
                    }
                }
            }
        },
        {
            name: 'hero-description',
            label: 'Hero Description',
            type: 'area',
            options: {
                widgets: {
                    'apostrophe-rich-text': {
                    controls: [ 'Bold', 'Italic', 'Link', 'Unlink' ]
                    }
                }
            }
        }
    ]
};

widget.html:

<div class="hero align-center-middle text-center"
    style="background: url('{{ apos.attachments.url(image.attachment) }}'); background-size:cover; background-position:center;">
    <div class="grid-x grid-padding-x">
        <div class="cell">
            <h1>
                {{ apos.area(data.widget, 'hero-title') }}
            </h1>
        </div>
        <div class="cell">
            <p>
                {{ apos.area(data.widget, 'hero-description') }}
            </p>
        </div>
    </div>
</div>

我已经尝试了“{{ apos.attachments.url(image.attachment) }}”中的所有代码组合，但似乎没有任何效果。我做得对吗，我缺少什么吗？非常感谢任何帮助。

谢谢，乔恩

Answer 1

首先，不要在架构字段名称中使用连字符。强制使用括号语法只会让它们更难使用。也完全不允许其他一些属性类型。使用驼峰式大小写：

{
  name: 'heroImage',
  // etc.
}

其次，您在 widget.html 模板中使用了变量 "image" 但它不是从任何地方分配的，因此它是未定义的。如果要访问小部件的属性，则需要将其引用为小部件的属性：

data.widget.heroImage

一旦你这样做，一切都会顺利进行。

第三：extensionMaps是附件模块本身配置的特性，这里没有作用。 extension 在这种情况下也不是一个选项。您可以将 group 设置为 images（允许 GIF、JPEG 或 PNG）或 office（允许一系列与办公相关的格式，如 txt 或 pdf）。

在撇号 css 小部件中显示图像时出现问题

Issue with displaying the image in an Apostrophe css widget

apostrophe-cms