Angular 5 修复 Assets/ 文件夹的相对路径

Question

我正在开发一个 Angular 5 应用程序，我将它托管在 Apache2.4 http 服务器上，并使用 http://localhost:7777/test/ 上的代理模块将其重定向

我的第一个问题是从浏览器调用服务时，它使用http://localhost:7777/ 作为基本 URL，通过从我的测试服务中删除斜杠快速解决，/service1/upload 到 service1/upload。 所以我从http://localhost:7777/service1/upload 转到http://localhost:7777/test/service1/upload。

现在我遇到了另一个未解决的问题，即 Assets/ 文件夹中的 image.png，它一直试图从 http://localhost:7777/assets/image.png 而不是 http://localhost:7777/test/assets/image.png 获取它

我测试了第二个 URL，它按要求返回了我的图像。如何让 Angular 5 相对地找到我的资产路径？在我的情况下，打电话给http://localhost:7777/test/assets/image.png

以下是我如何访问 HTML 中的图像：

..
<img  src='assets/stop_pic.PNG' > 
..

我的 index.html 中的基本 href ：

<base href="">

我的 angular-cli.json 配置文件：

...    
apps": [
        {
          "root": "src",
          "outDir": "../src/main/resources/static",
          "assets": [
            "assets"
          ],
          "index": "index.html",
          "main": "main.ts",
          "polyfills": "polyfills.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.app.json",
          "testTsconfig": "tsconfig.spec.json",
          "prefix": "app",
          "styles": [
            "styles.css"
          ],
          "scripts": [],
          "environmentSource": "environments/environment.ts",
          "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        }
      ],
    ...

Answer 1

得到了答案，即使它有点愚蠢.. 浏览器缓存了我的应用程序，因此它没有计算我从 <img src='../../assets/stop_pic.PNG'> 到 <img src='assets/stop_pic.PNG'> 的最后修改。 从我的图像 src 中删除所有斜线工作！

Answer 2

在你的 index.html 中设置你的基本 href，比如 -

<base href='/'>

改变-

 "assets": [
            "assets"
          ],

到 -

 "assets": [
             "src/assets"
          ],

在您的 HTML 中引用图片，例如：

src="/assets/images/footer-min.png"