Question

假设我的Angular 8项目中有多个 img 标签。在构建用于生产的应用程序时，我需要这些图像的路径有所不同。例如，如果我在本地处理项目时在html模板中有以下内容

<img src="assets/image1.jpg" />

我需要它成为

<img src="images/image1.jpg" />

用于生产版本。使用--baseHref和--deployUrl无济于事。

我该怎么做？

Answer 1

只需在环境中设置一个变量，然后相应地使用它

例如：环境：ts

imagePath: /images

environment.prod.ts：

imagePath: /assets

然后，您必须在.ts文件中导入环境，并在路径中使用该变量

Answer 2

为生产版本创建辅助应用程序配置文件，并将资产配置为输出到所需的任何文件夹。您也可以只在单个构建配置文件中复制输出，以便将它们输出到多个位置。

配置多个应用配置文件：https://github.com/angular/angular-cli/wiki/stories-multiple-apps

资产配置：https://github.com/angular/angular-cli/wiki/stories-asset-configuration

"assets": [
  { "glob": "**/*", "input": "src/assets/", "output": "/output/" }
]

接下来，只需使用环境文件存储每个构建的路径，然后使用该文件绑定到您的<img [src]="myImageVariable"/>

Answer 3

我认为唯一的解决方案是使用Multiple Apps integration：

在您的.angular-cli.json中添加新的生产应用

"apps": [
  {
    "root": "src",
    ...
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "assets": [
     "src/assets",
   ]
  },
  {
    "root": "src",
    ...
    "main": "main2.ts",
    "polyfills": "polyfills2.ts",
    "test": "test2.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app2",
    "assets": [
     "src/assets2",
   ]
  }  
],

稍后投放/构建广告：

要投放第一个应用程序：ng serve --app=0或ng serve --app 0

要投放第二个应用程序：ng serve --app=1或ng serve --app 1

Answer 4

好的，建议的解决方案对我不起作用。我尝试更改angular.json，但这仍然不能解决问题，因为<img src="assets/myfoldername/img1.jpg />仍然包含资产部分！

！

由于我将Angular应用程序合并到我的ASP.NET Core 3.0项目中并通过IIS托管，因此我使用IIS URL重写规则，现在一切正常。因此，无需添加虚拟应用程序，无需在角度应用程序中使用任何环境变量。 只需一个重写规则。完成。

PS。我将在ASP.NET Core中使用URL重写中间件，因此它可以在任何OS和Web服务器上使用。

Angular 8应用程序用于开发和生产的不同资产位置

4 个答案: