Repository navigation
Webpack skips images referenced in html templates (img src) #2231
Description
Please provide us with the following information:
- OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
OS X El Capitan
- Versions. Please run
ng --version. If there's nothing outputted, please run
in a Terminal:node --versionand paste the result here:
angular-cli: 1.0.0-beta.14
node: 6.3.0
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 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
- 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. - Mention any other details that might be useful.
Problem is reproduced withng build -prodand is not reproduced withng 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.
Activity
michaelpm91 commentedon Sep 19, 2016
I've been having similar issues. In
angular-cli.jsonin theappsarray there's anassetskey. 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 commentedon Sep 19, 2016
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
filipesilva commentedon Sep 22, 2016
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 commentedon Sep 22, 2016
@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 commentedon Sep 22, 2016
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.
alexsorokoletov commentedon Sep 27, 2016
This ticket as far as I know is not about assets folder and assets behavior
filipesilva commentedon Oct 6, 2016
We added this functionality in beta.16, but are actually looking at removing it due to #2396.
angular-automatic-lock-bot commentedon Sep 6, 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.