Ember CSS - 图片未在生产中加载

Question

我正在构建一个 Ember 站点，但我遇到了无法在生产环境中加载图片的问题。

我使用的是最新版本。我已经安装了 SASS 模块并且有一个非常基本的样式表 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%;
}

SASS 模块很乐意将其转换为 app.css

当我做基本的 ember 发球时，效果很好。但是，对 AWS S3 执行 ember deploy production --activate 时出现问题。

我的所有资产都按预期进行了指纹识别，所以我的图像文件变成了 assets/Images/StockSnap_8SAODL7HZ4-4279bf0a502da08d183b81b67d479b40.jpg

然而我的 app.css 没有得到更新并继续寻找 assets/Images/StockSnap_8SAODL7HZ4.jpg

我想我遗漏了一些明显但不确定是什么的东西！

Answer 1

根据粘贴的 URL 示例判断，区分大小写可能会导致此处出现问题。

如果 URL 在生产中出现问题，但在本地工作正常，我首先检查 URL 和实际文件路径之间的大小写不匹配。这可能会导致问题，因为生产服务器通常有 sensitive 文件系统（特别是如果你有 Linux 服务器），但大多数开发机器通常是 case 不敏感.

例如，如果您有以下网站结构：

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

这将适用于 不敏感 文件系统的情况：

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

但是，在敏感文件系统上它会返回 404。

Ember CSS - 图片未在生产中加载

Ember CSS - Images not loading in production

javascript

web-deployment

ember.js