Angular-cli: Webpack skips images referenced in html templates (img src)

[alexsorokoletov]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

OS X El Capitan

1. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.14
node: 6.3.0
os: darwin x64

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

Create new project with ng new test-project
Add images folder to src (and you can add to src/app, doesn't matter).
Reference image in app.component.html
<img src="images/image.png" alt="test" />
Build project with ng build -prod

1. The log given by the failure. Normally this include a stack trace and some
   more information.
   Image is not being bundled into dist folder and is not loading producing 404 error.
2. Mention any other details that might be useful.
   Problem is reproduced with ng build -prod and is not reproduced with ng serve -prod.
   github repo showing problem: https://github.com/alexsorokoletov/angular-cli-image-loader-problem

I am not sure if this is a problem of webpack html loader plugin or issue related to it's configuration or I am doing something wrong.
For a workaround I am using assets folder and put all images there.
However, it is strange to me keeping some images in assets and some (that are mentioned in the css files) inside the webpack bundle

---

Thanks! We'll be in touch soon.

[kidshenlong]

I've been having similar issues. In angular-cli.json in the apps array there's an assets key. When building the angular cli uses the directory you pass in there to bundle assets. You could change this to "assets": "images" or whatever.

[alexsorokoletov]

Assets is a different story.
If you mention image.png in CSS, this image is bundled into styles.js.gz and loaded from this file without any additional request.

However, the asset images are just file copied to dist folder and are not optimized in any way.

Alex

On Sep 19, 2016, at 17:33, Michael Patterson-Muir [email protected] wrote:

I've been having similar issues. In angular-cli.json in the apps array there's an assets key. When building the angular cli uses the directory you pass in there to bundle assets. You could change this to "assets": "images" or whatever.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[filipesilva]

As far as I can tell, we don't process html and just load it as is - but we process css and thus inline stuff.

@TheLarkInn is there a good way to inline images in html? https://github.com/webpack/html-loader seems to offer options to do it, but I get the feeling there was a reason why we didn't do that.

[alexsorokoletov]

@filipesilva thank you for looking into this.
My understanding is that we can use similar approach as with css. I am not 100% sure about that and what webpack can actually do about that.

Would love to have a way to bundle images in html or other suggested way to have images in html optimized. Additionally, having a sample right inside a new project template would be awesome.

[TheLarkInn]

I think we can simply do this through html-loader. There isn't a reason I see that we _shouldn't_. Let me whip up a PR for this.

[rolandoldengarm]

I've been having similar issues. In angular-cli.json in the apps array there's an assets key. When building the angular cli uses the directory you pass in there to bundle assets. You could change this to "assets": "images" or whatever.

What if I've got two folders with assets? Don't ask why, but I've got an "img" folder and an "images" folder. It does not seem to support an array.... @kidshenlong

[alexsorokoletov]

This ticket as far as I know is not about assets folder and assets behavior

[filipesilva]

We added this functionality in beta.16, but are actually looking at removing it due to https://github.com/angular/angular-cli/issues/2396.

[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._}