Ember CSS - 图像未在生产中加载答案

【问题标题】：Ember CSS - Images not loading in productionEmber CSS - 图像未在生产中加载
【发布时间】：2017-06-09 12:27:31
【问题描述】：

我正在构建一个 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 服务时，这很好用。然而，ember deploy production--activate 到 AWS S3 却出了问题。

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

但是我的 app.css 没有更新并继续寻找 资产/图像/StockSnap_8SAODL7HZ4.jpg

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

【问题讨论】：

您的图片目录是assets/images 还是assets/Images？您在后面的示例中将其大写（这将导致区分大小写的文件系统出现问题，例如常见的生产 linux 服务器）。
我建议在本地也通过 ember s --prod 进行测试。如果是broccoli-asset-rev 包的问题，那么它也应该是本地的问题。另一种可能是broccoli-asset-rev 被文件名中的8SAODL7HZ4 混淆了（可能它认为它已经散列并忽略它），尝试重命名它。
谢谢我改变了图片上的大写字母 I。使用 ember s --prod 进行测试会产生相同的结果 - css 文件未使用指纹资源进行更新。我也试过重命名文件。
对不起，你是对的。这是大写字母。当我更改它时，我在 dist 文件夹中更改了它，而不是在 public 文件夹中 - 当然它自己改回来了。
@ChrisNevill 我发表了我的评论作为答案。很高兴知道伪哈希不会导致broccoli-asset-rev 出现问题。我认为这可能是一个远射，但检查总是好的。我在broccoli-asset-rev 遇到的一个问题（以及我对这个库了解一点的原因）是，如果您尝试使用嵌入链接（任何可以有链接但没有链接的东西）提供诸如降价（或 SVG）之类的东西t HTML、JS 或 CSS）。默认情况下，broccoli-asset-rev 只会替换它在 HTML、JS 或 CSS 中找到的链接，这会导致链接断开问题。

标签： javascript ember.js web-deployment

【解决方案1】：

从粘贴的 URL 示例来看，区分大小写可能会导致此处出现问题。

如果一个 URL 在生产中中断，但在本地工作正常，我首先检查 URL 和实际文件路径之间的大小写不匹配。这可能会导致问题，因为生产服务器通常具有区分大小写文件系统（特别是如果您有 Linux 服务器），但大多数开发计算机通常是 不区分大小写的。。 p>

例如，如果您有这样的网站结构：

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

这将适用于大小写 insensitive 文件系统：

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

但是，它会在大小写 sensitive 文件系统上出现 404。

【讨论】：

谢谢迈克尔。只是要注意，因为我没有在上面提到它。我在一台 Windows 机器上，这当然是不区分大小写的，而且即使在那时使用 ember s --prod 结果也没有在 css 文件中更新 - 所以看起来是 ember 本身在一审。