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，它 returns 我的图像如所问。如何使 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

在您的 index.html 中设置您的基本 href，例如 -

<base href='/'>

变化-

 "assets": [
            "assets"
          ],

至 -

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

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

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

Answer 2

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

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

Angular 5 fix relative path for Assets/ folder

httpserver

angular

angular5