Repository navigation
linking an image from template html requires path from app root #3292
Description
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.
Activity
Nikki1993 commentedon Nov 27, 2016
You are supposed to put images in the assets folder that is inside src folder then you can specify path as
assets/../image.pngentzik commentedon Nov 27, 2016
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 commentedon Nov 27, 2016
Ignore my comment, I read the end of your issue :) seems legit :D, yea would be nice to have it in this instance.
filipesilva commentedon Dec 29, 2016
We had this in once, by using
HTML-loader, but it broke a lot of projects (see #2396).I agree that the scenario you're proposing is super relevant.
filipesilva commentedon May 22, 2017
Closing in favor of #3415, there's some more discussion in that one.
dlarr commentedon Feb 2, 2018
@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 commentedon Nov 8, 2018
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 commentedon Sep 8, 2019
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.