CSS images with relative path not included in production build

[arntj]

Please provide us with the following information:

OS?

Windows 10

Versions.

1.0.0-beta.32.3

Repro steps.

1. Create new app with ng new.
2. Add an image anywhere outside the app directory, e.g. in the assets directory.
3. Reference this image from the app.component.css, using a relative path.
   Example: background-image: url(../assets/some_image.png)
4. Do the following: ng build --prod.
5. Verify that the image is not copied along with the CSS in the build output, meaning the image reference is now broken.

The log given by the failure.

N/A

Mention any other details that might be useful.

The image is correctly copied if doing ng build without the --prod switch.

---

Thanks! We'll be in touch soon.

[filipesilva]

Heya @arntj, can you do me a favor and verify the image really is broken within you app? For images smaller than 10kb we actually inline them, which is why it wouldn't be copied over.

[arntj]

Yes, I loaded it in an HTTP server and verified that the image was broken in the web browser. The image I tested it with is 60 kb.

[arntj]

The production output CSS links to a hashed image file that doesn't exist in the output dir.

[filipesilva]

I can verify this happens:

• touch ./src/assets/img.svg (using svg here because it always loads as a file regardless of size)
• add h1 { background-image: url(../assets/img.svg) } to ./src/app/app.component.css
• ng build
• verify ./dist/img.svg exists and it's referenced in ./dist/main.bundle.js
• ng build --prod
• verify ./dist/img.[hash].svg does NOT exist but it's referenced in ./dist/main.[hash].bundle.js

Will investigate.

[filipesilva]

This seems to be related with AoT.

Workarounds for now:

• use ng build --prod --no-aot
• use an absolute path for the image (starting with /)

[JimiC]

In my case, cause I use base-href './' the workaround is as follows:

• use ng build --prod --no-aot --base-href ./
• use a relative path to the images folder (i.e. ../assets/images/img.*)

[b4youleap]

This is a little different but maybe related?
OS?
Windows 10
Versions.
1.0.0-beta.32.3
Upgrading project from beta-31 - my issue showing up in dev when running ng serve

Under my src directory I have a theme file: ui-framework-theme.css It is referenced in my index.html as <link href="ui-framework-theme.css" rel="stylesheet" />
(apologies if this is bad practice - I'm learning)
Was getting a 404 error on the file until I changed it to
<link href="/src/ui-framework-theme.css" rel="stylesheet" />

[janwo]

I referenced my images in html like <img src="../../someimage.svg"> and webpack is also not emitting this file.

[janwo]

@filipesilva Does this affect images in html as well?