web-dev-qa-db-ja.com

Angular 5 Assets /フォルダの相対パスを修正

私はAngular 5アプリで作業しています。Apache2.4httpサーバーでホストしていて、http://localhost:7777/test/のプロキシモジュールでリダイレクトしています

私の最初の問題は、ブラウザーからサービスを呼び出すときに、ベースURLとしてhttp://localhost:7777/を使用していたため、テストサービスのスラッシュを/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から取得しようとしています。

2番目の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 conf：

...    
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"
          }
        }
      ],
    ...
angularangular5httpserver
6
Logan Wlv

少しばかげていても、答えがわかりました。ブラウザは私のアプリをキャッシュしたので、<img src='../../assets/stop_pic.PNG'>から<img src='assets/stop_pic.PNG'>への最後の変更はカウントされません。私の画像からすべてのスラッシュを削除すると、srcが機能しました！

3
Logan Wlv

次のように、base hrefをindex.htmlに設定します-

<base href='/'>

変化する -

 "assets": [
            "assets"
          ],

へ-

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

次のようにHTMLで画像を参照してください：

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