Angular-cli: linking an image from template html requires path from app root

[entzik]

OS?

OSX El Capitan

Versions.

angular-cli: 1.0.0-beta.21
node: 6.2.2
os: darwin x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

• create a component under app, say AppHeaderComponent.

• in the component directory - app-header - create an 'images' directory.

• put an image in that directory, say 'company-logo.png'.

• in the template link the image as '<img src="images/company-logo.png">'. now serve the application

• serve the app using ng-serve

=> this used to be possible when building with 1.0.0-beta16, the image would show up as expected. when building with 1.0.0.beta21 the image is not found. for it to work, I need to specify the full path from root: "<img src="app/header-panel/images/company-logo.png">. This is annoying because if I decide to refactor the project by renaming the components or moving it deeper in the hierarchy I need to also refactor all the templates. Being able to specify a relative path relative to the template is a big advantage. Also I need to publish this "app-header" as a reusable component, the image belongs next to the template.

The log given by the failure.

no specific log

Thanks! We'll be in touch soon.

[Nikki1993]

You are supposed to put images in the assets folder that is inside src folder then you can specify path as assets/../image.png

[entzik]

that would be OK if you're thinking "website". I am thinking "reusable component". that image exclusively belongs to the component and I would like it to stay next to the template that uses it.

[Nikki1993]

Ignore my comment, I read the end of your issue :) seems legit :D, yea would be nice to have it in this instance.

[filipesilva]

We had this in once, by using HTML-loader, but it broke a lot of projects (see https://github.com/angular/angular-cli/issues/2396).

I agree that the scenario you're proposing is super relevant.

[filipesilva]

Closing in favor of https://github.com/angular/angular-cli/issues/3415, there's some more discussion in that one.

[dlarr]

@entzik . I am looking for a way to do the exact same thing. Embbed an image into component that will be reused. Did you overcome this ? If yes How ?

regards

[ryager01]

Best way I can come up with is to include the image inline, either in the html or the css, Here is a walk through

http://www.websiteoptimization.com/speed/tweak/inline-images/

[angular-automatic-lock-bot[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._}