Static images with apostrophe-cms

Question

I've read the Guide for pushing assets and it didn't help me. I want to change the arrow of a dropdown that I have on my code.

<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>

This is the less code:

.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{
           [...]
        }
}

I've seen that I have to add the image on /my-module/public/img/my-image.png, I've added it and I add the url with the correct path in the less file, but it doesn't work.

If I add in de index.js file like when yo add a .less this code:

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

it displays this error:

    /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)

Can someone tell me what I'm doing wrong? Thanks.

Answer 1

The pushAsset method is for CSS files and javascript, not images. So that code will not work. But, you don't need it. It's only for combining things into bundles for delivery as a single file, which is not a feature you need for your image.

If you have an image at lib/modules/mymodulename/public/my.png, then you can reference it with this URL: /modules/mymodulename/my.png

This works because Apostrophe copies or symlinks the public folders of your modules to /modules/... at startup, depending on the OS.

Note that the URL does not contain /public or /lib. Just /modules/mymodulename/.... You can have an images subdir if you want, in which case it would be /modules/mymodulename/images/my.png (that is, everything that comes after public in the filename does need to be in the URL).