How to get pub media url in .less file?

Question

I have an image that i need to use in .less file, the image is located in:

pub/media/kool/setting/blank.gif

in the .less files i tried to define it like this:

@footer_bg_file:~"../kool/setting/blank.gif"

but i always got an error like this in var/log/system.log

[2020-05-04 09:05:03] main.CRITICAL: Unable to resolve the source file for 'frontend/vendor/theme/en_US/kool/setting/blank.gif' [] []

Answer 1

You can use the .lib-url('images/fallback.png'); function, this example is taken from the core in lib/web/css/source/lib/_utilities.less.

.column.left {
    .lib-url('images/fallback.png');
    background:url("@{url}") repeat-y;
}
.columns {
    .lib-url('images/fallback.png', 'Magento_Catalog');
    background:url("@{url}") repeat;
}

This is the function, it returns the path you specified with the base URL prepended and optionally accepts a second argument which is a module.

// File - lib/web/css/source/lib/_utilities.less
.lib-url(@_path) {
    @url: "@{baseDir}@{_path}";
}

.lib-url(
    @_path,
    @_module
) when not (@_module = false) and not (@_module = '') and (@urls-resolved = false) {
    @url: "@{_module}::@{_path}";
}

.lib-url(
    @_path,
    @_module
) when not (@_module = false) and not (@_module = '') and (@urls-resolved = true) {
    @url: "@{baseDir}@{_module}/@{_path}";
}

This function uses the @baseDir variable and optionally accepts a second argument which is a module: which is declared in lib/web/css/source/lib/_variables.less

@baseDir: "../";