在撇号 css 小部件中显示图像的问题

Question

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

'模板警告：无法检索附件 url，因为它丢失了，已设置默认图标。请尽快解决这个问题！'

小部件的 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）。