Question

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

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

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

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

1 个答案: