javascript - Angular 2 避免编译 CSS 中定义的图像

Question

我的 Angular 2 应用程序中有一个 styles.css。 它在 .angular-cli.json 的 app.styles 对象中被引用。 在那个 css 里面我有背景图片的 url，例如:

.bg-game {
  background-image: url("assets/app/game_bg_768.jpg");
}

在编译应用程序时，Angular 2 似乎将文件从它们的位置复制到已编译应用程序的根文件夹中，并在其名称中添加一个随机哈希值。

例如 assets/app/game_bg_768.jpg 将作为 game_bg_768.023f195663c85e8f0322.jpg 复制到 dist/(已编译的应用程序文件夹)。

然后在Angular 2编译出来的styles css中，引用会相应的改变:

.bg-game {
  background-image: url("game_bg_768.023f195663c85e8f0322.jpg");
}

我想禁用整个过程，仅针对在 CSS 中链接到的图像，我不想为整个应用禁用随机哈希生成。

这背后的原因 - 我在游戏开始前预加载 assets/app/game_bg_768.jpg，但由于在编译的 css 中指定了不同的 url，在游戏过程中会发出另一个请求加载 game_bg_768.023f195663c85e8f0322.jpg。

另一个原因是，我希望我的图像保留在我的 Assets 文件夹中，我不希望它们被复制到已编译应用程序的根文件夹中。

Answer 1

您可以使用绝对 URL 来避免它。

.bg-game {
  background-image: url("/assets/app/game_bg_768.jpg");
}

但是，在您这样做之后，编译器将不再检查图像是否存在于 assets 目录中。

此外，如果您将应用程序部署到域的子目录，浏览器将在 /assets 而不是 /subdirectory/assets 中查找 Assets 。使用 base-href 或 deploy-url 无济于事。