带有撇号-cms 的静态图像

Question

我读过 Guide for pushing assets 但它对我没有帮助。我想更改代码中下拉菜单的箭头。

<div class="filter-dropdown">
    <select class="filter-select select-borders-styles">
        <option value="newest">Newest First</option>
        <option value="oldest">Oldest First</option>
    </select>
</div>

这是少代码：

.filter-dropdown{
      [...]

        .filter-select{
            background: url('/modules/my-module/public/img/my-image.png') no-repeat 96% 0;
            overflow: hidden;
            width: 240px;
            padding: 20px;
            font-size: 19px;
            -webkit-appearance: none;  /*Removes default chrome and safari style*/
            -moz-appearance: none;   /*Removes default style Firefox*/
            color: #0167C2;  

            select{
                [..]
            }
        }

        .select-borders-styles{
           [...]
        }
}

我看到我必须在 /my-module/public/img/my-image.png 上添加图像，我已经添加了它，并且我在 less 文件中添加了具有正确路径的 url，但是它没用。

如果我在 de index.js 文件中添加，就像添加 .less 代码时一样：

    self.pushAssets = function() {
      superPushAssets();
      self.pushAsset('img', 'options_arrow', { when: 'always' });
    };

它显示此错误：

    /home/kalia/Escritorio/leo-newsletter/newsletter/node_modules/apostrophe/index.js:75
        throw err;
        ^
TypeError: Cannot read property 'fs' of undefined
    at Object.self.push (/home/kalia/Escritorio/leo-newsletter/newsletter/node_modules/apostrophe/lib/modules/apostrophe-assets/index.js:497:67)

有人可以告诉我我做错了什么吗？谢谢。

Answer 1

pushAsset 方法适用于 CSS 文件和 javascript，不适用于图像。因此该代码将不起作用。但是，你不需要它。它仅用于将内容组合成包以作为单个文件交付，这不是您的图像所需的功能。

如果您在 lib/modules/mymodulename/public/my.png 有图片，那么您可以用这个 URL 来引用它：/modules/mymodulename/my.png

之所以有效，是因为 Apostrophe 在启动时将模块的 public 文件夹复制或符号链接到 /modules/...，具体取决于 OS。

请注意 URL 不包含 /public 或 /lib。就 /modules/mymodulename/...。如果你愿意，你可以有一个 images 子目录，在这种情况下，它将是 /modules/mymodulename/images/my.png（也就是说，after public 中的所有内容文件名确实需要在 URL).

带有撇号-cms 的静态图像

Static images with apostrophe-cms

apostrophe-cms