CODEWITHSUNDEEP
javascriptember.jsweb-deployment
Chris Nevill
Chris Nevill

Reputation: 6152

Ember CSS - Images not loading in production

I'm building an Ember site and I'm having problems with my images not loading in production.

I'm using the latest version. I've installed the SASS Module and have a very basic stylesheet in app\styles\app.scss

html {
    height: 100%;
    overflow-y: hidden;
}

body {
    background-image: url('/assets/images/StockSnap_8SAODL7HZ4.jpg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

The SASS module is happily converting that into app.css

When I do a basic ember serve this works fine. However doing a ember deploy production --activate to AWS S3 things go awry.

All of my assets get fingerprinted as expected, so my image file becomes assets/Images/StockSnap_8SAODL7HZ4-4279bf0a502da08d183b81b67d479b40.jpg

However my app.css doesn't get updated and continues to look for assets/Images/StockSnap_8SAODL7HZ4.jpg

I guess I'm missing something obvious but not sure what!

Upvotes: 0

Views: 679

Answers (1)

Michael Boselowitz
Michael Boselowitz

Reputation: 3006

Judging by the pasted URL examples, case sensitivity may be causing an issue here.

If a URL is breaking in production, but works fine locally, I first check for a case mismatch between the URL and the actual file path. This can cause an issue because it's typical that production servers have a case sensitive filesystem (especially if you have Linux servers), but most dev machines are usually case insensitive.

For example, if you have this site structure:

test-site
├── imgs
│   └── test-image.png
└── index.html

This will work on a case insensitive filesystem:

<img src="IMGS/test-image.png">

However, it will 404 on a case sensitive filesystem.

Upvotes: 1

Related Questions