How to Set a Common Image Path for Less Files

Is there a way to set a common image path for LESS files?

Try using string interpolation for things like this. Look for “variable interpolation” in docs.

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

Can less.js handle relative paths for images?

Try quoting the URL, I always do it this way to keep it neat though,

@header-image: "../img/header.jpg";

background: url(@header-image);

Also, the URL code can be seen on github. Looks like it is added if you are running in a browser.

Relative path of node_modules for LESS @import

You can achieve this by installing less-loader and add it into webpack.

How to do it:
https://www.npmjs.com/package/less-loader#webpack-resolver

Example:

@import "~font-awesome/css/font-awesome.min.css";

Angular 2 img src in a relative path

I am using webpack and have been able to overcome this issue by requireing the image in the component as a variable and using this in my template.

This is because during the bundling phase webpack will load the resource and store the correct URL and calling require at runtime will get this correct URL to pass to the template.

---

Example

Using the following directory structure

app/
    header/
        header.component.ts
        header.component.html
        assets/
            logo.png
...

header.component.ts

...
@Component({
    selector: 'header',
    templateUrl: './header.component.html', // Auto required by webpack
})
export class HeaderComponent {
    private LOGO = require("./assets/logo.png");

    constructor() {};
}

header.component.html

<div>
    <img [src]="LOGO" />
</div>

---

Admittedly this binds the component and template but the require needs to be in the component so that webpack is able to analyse and load it when bundling.

---

With this approach I have packaged my module using npm and installed and used it in another project - which also uses webpack.

I am yet to test with SystemJS.

---

Related Topics