1

I'd like to know the idiomatic way to reference css images (images linked in css through url(...) ) from within an Ember addon.

Ostensibly the addon public/ folder will get merged with dist/ in the final build and the css files will be merged with vendor.css

How can images therefore be linked i.e. if I have an image in /my-addon/public/images/icon.png how should I reference it in my CSS file? I've tried url(/my-addon/images/icon.png) and it doesn't respect the rootURL setting (only works if rootUrl = '/').

The only thing that seems to work is url(../my-addon/images/icon.png) but I've never heard mention that images should be linked with relative paths in this way.

Is there an established way to reference image assets from within addon css?

I've tried everything mentioned above but the only thing that works is relative paths. Am I correct to do so?

Alexandros K
  • 947
  • 1
  • 6
  • 19
  • things get a little more clear if you declare support for certain times of build systems -- for example, in embroider/webpack, importing an image in to a javascript file gives the publish-time URL, which can be thrown on img.src, or however the URL wants to be used. – NullVoxPopuli Feb 18 '23 at 17:33
  • This is a very tantalizing clue @NullVoxPopuli. Is this different from the default configuration? – Alexandros K Feb 21 '23 at 23:44
  • yeah, default configuration isn't for embroider -- the way your URLs need to be depends on your intended audience, etc – NullVoxPopuli Feb 22 '23 at 16:23

0 Answers0