Angular 5 asset pathing variable

Question

I have an image (i.e. a logo) that will be used in various components.

My folder structure looks similar to this:

src/
    app/
        component1/
            component1.component.ts
            ...
        component2/
            sub-component1/
                sub-component1.component.ts
                ...
            component2.component.ts
            ...
    assets/
        img/
            logo.jpg
        icons/
    styles.scss

Is there an easy way to store the path to the assets/img folder in a SCSS/SASS variable to be able to access the logo.jpg file without putting differing relative paths in the various components?

The reason I ask is I would like to swap out an image based on a theme, which I've implemented from this post here. When my project gets compiled, the variables inserted into the background-image: url(...) attribute have a specified path which doesn't work correctly for all components.

I can imagine this would help other scenarios immensely too though.

Answer 1

So it seems tslint has been throwing me off.

In my theme itself, I stored the variable as such:

$logo-path: url('assets/img/logo.jpg');

However tslint highlighted this as being a false path, since it couldnt locate the image relative to the path of the theme itself, thus because at compile time it evaluated this path as being incorrect, it evaluated to null when it was inserted into my actual component-level stylesheets.

To fix this, instead I have a string of the path in a variable, and the actual URL is evaluated in my component-level stylesheet.

$logo-path: 'assets/img/logo.jpg'

In my component level styling:

.class-name{
    background-image: url(#{$logo-path});
}

Sadly, someone answered my question by pointing out I could simply use the assets folder directly, and I didn't actually try to build with a direct path to the assets folder, on the assumption tslint was correct with invalid pathing. The answer was deleted by the original poster, so thank you for setting me on the right path anyway (yes that was intended).

Answer 2

A possible other solution from this answer: you can store the path to the asset folder:

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;

Then you can change that variable's value.