[question] Support for image/font relative paths in css

[Necroskillz]

I found a few very old issues about this, but the code seems to have been refactored a lot since. (#2384)

I couldn't find any support for this any more.

Example:

project
│   app.js
└───components
    ├───my-component
    │   │   my-component.ts
    │   │   my-component.css
    │   │   image.jpg

my-component.css

div {
  background: url('image.jpg')
}

Since the css is put into style tags, the browser assumes it's relative to the root, not the my-component.css file (or to my-component.ts if it's inlined). Also, the host may be different - the files could be served from different domain, and expect the image be requested from the same domain, not the current browser domain.

So my question is - is this something that you want to support or should it be handled differently (maybe I missed something)?

[shlomiassaf]

Just to save the trouble of reading the whole referenced issue, you need to set the 'moduleId' component annotation otherwise it will not work.

Available from beta.1

@Component({
  moduleId: module.id, 
  templateUrl: 'my-component.html',
  styleUrls: ['my-component.css'] 
})
class MyComponent {
}

[Necroskillz]

The moduleId (and also UrlResolver) is used when resolving styleUrls and templateUrls, but not for url('iamge.jpg') or <img src='image.jpg' /> inside of them.

[shlomiassaf]

So your'e a saying that angular parses the top level assets paths (CSS/HTML) but not their internal content...

This is in an essence an implementation of Webpack loaders... quite the same.
I don`t know what the team has planned here, but its very interesting.

What would be the strategy? Is it going to be a runtime loader or a build loader? interesting issue from many aspects.

@pkozlowski-opensource what is the road map on this? clearly its an important issue for those who seek component isolation.

For now I guess, you could use a build step to transform these files.
I guess you can transform it to the styles as text and not get it via an http call, or you could transform the file itself into some temp file and put it as the path in styleUrls, webpack will probably be very helpful here.

Anyway, I'm sure there will be a lot of confusion around style and styleUrls, they are a good feature but developers that won't understand them will run into some serious css selector mis-hits.
If your'e building an app (opposed to lib), not all components needs isolation and certainly every component having a separate CSS file is a big performance problem for servers...

A lot of blogs are waiting to be written on the right strategy for the right task on these features.

[bryanforbes]

The moduleId (and also UrlResolver) is used when resolving styleUrls and templateUrls, but not for url('iamge.jpg') or <img src='image.jpg' /> inside of them.

This isn't strictly true for styleUrls. The mechanism in the beta actually rewrites @import url(...), but no other url(...) statements. Before alpha 44, all url(...) statements were resolved to the root of the application, but that behavior was removed in 7dde18b. I'm currently working around the issue by inlining the images using data URLs, but it's not ideal IMO.

[bryanforbes]

One more comment: this issue makes it very hard to create components that can be reused across projects that may serve them from different locations. And while the work-around I'm using (inlining using data URLs) is OK, it introduces something I consider to be a production-time optimization into the development workflow.

[Cowlephant]

I am currently at a roadblock right now, and I don't know how to work around this. I'm trying to use clip-path for SVG, utilizing d3.js, and it will not recognize url("#clip") and I've tried every path I can think of to get it to work with an absolute reference and I still cannot.

Really looking to have a solution for html/css relative pathing.

[xealot]

Just to clarify, there is no solution for referencing images/fonts/whatever inside of CSS by using a relative url(...) declaration, right?

We also came up with inlining as a "solution" but it doesn't seem like a good fix. This is sort of a big deal for reusable components.

[webmutation]

Any update on this, because it breaks component encapsulation... cant use images or font relative to the component?

So how do I encapsulate an <img src="something.svg" with a component has illustrated?
According to #2384 it should be <img src="$baseURL/something.svg" but this does not appear to work

dataURLs are not exactly cache friendly.

[eistrati]

Same problem here. Any feedback on what work arounds we could use in RC5?

[dashng]

Any solutions on this?

[DzmitryShylovich]

can somebody reproduce in plunkr?

[bmm]

@DzmitryShylovich please try https://plnkr.co/edit/BfIhk6zsyTmi30cM6Arz?p=preview. At the end of file app/dashboard.component.css there is a reference to a svg file that lives inside app/ folder, although the url has to include app/ to work.

[splincode]

@mhevery Is the issue relevant?

[mhevery]

will not fix: not feasible.

[byrondover]

@mhevery Why not?

See the OP's original question.

So my question is - is this something that you want to support or should it be handled differently (maybe I missed something)?

Please provide guidance on how this should be handled, or link to the relevant discussion elsewhere so readers can learn why this is no longer supported in Angular.

[mlc-mlapis]

@byrondover ... one fact ... external templates and external styles are inlined as the first step of the compilation ... so at that moment there are no externals.

[mhevery]

Because there is no easy way to have the absolute path mean the same thing at runtime (JIT mode) as well as compile (AOT time).

[byrondover]

Thanks for the clarification.

For those finding this thread in the future, you can work around this issue by importing relative assets programmatically.

Component({
  selector: 'app-my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class MyComponent {
  headerImageUrl = require('./images/header.png');
}

You can then interpolate these variables in your templates as needed. This relies on webpack to resolve the relative path a build time. Injecting variables into CSS styles is even trickier, but also possible.

<img class="header-image" src="{{ headerImageUrl }}">

An ugly workaround which pollutes your components with require statements and placeholder variables, but it gets the job done. Here's to hoping for an improved solution at some future date! 🤞

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}