Angular 15：部署后未从资产文件夹加载图像

Question

我有一个

angular 6

项目，我们曾经为图像提供 CSS 类，如下所示：

.some-class { background: url('asset/images/myimage.png');

无论部署和本地开发如何，这都可以正常工作。

最近，我们将这个项目的 Angular 版本升级到了 15，如果我们尝试保持上述代码不变，编译器会抱怨

Can't resolve './assets/_css/assets/images/myimage.png'

所以我们尝试了这样的方法：

.some-class { background: url('~asset/images/myimage.png');

现在，这会将文件从资产文件夹复制到根文件夹，并提供像 myimage_2432432.png 这样的图像的哈希值

我们还尝试了以下选项：

.some-class { background: url('../../asset/images/myimage.png');

这与第二点中所述相同，但我们可以使用它，因为我们的应用程序嵌入到其他一些门户中，并且将文件保留在根文件夹中也是行不通的。

根据给定的架构，似乎我们只能将下面的图像渲染到 QA 环境：

.some-class { background('~/asset/image/myimage.png'); // Please note that this is after deployment as the app could be standalone or embedded into another portal

记住上述要求，有人能提出什么建议吗？

我们的 webpack 能成为这里的救世主吗？

Answer 1

可能的解决方案：

1. 尝试使用带有波形符（~）的相对路径，如下所示。

   .some-class { 背景： url('../../assets/images/myimage.png'); }

2. 确保您的 angular.json 或 angular-cli.json 文件配置正确。

3. 检查构建选项中的“资产”部分，确保包含您的资产文件夹。

   “资产”：[ “src/资产”， “src/favicon.ico” ],

4. 尝试使用 Angular CLI 命令来构建和服务您的应用程序。例如：

   ng 构建 --prod

   ng 服务 --prod