web-dev-qa-db-fra.com

Angular 5 fixe le chemin relatif pour les actifs / dossier

Je travaille sur une application Angular 5, je l'héberge sur un serveur http Apache2.4 en la redirigeant avec un module proxy sur http://localhost:7777/test/

Mon premier problème était lors de l'appel d'un service à partir du navigateur, il utilisait http://localhost:7777/ comme URL de base, rapidement résolu en supprimant la barre oblique de mon service de test, /service1/upload à service1/upload. Je suis donc passé de http://localhost:7777/service1/upload à http://localhost:7777/test/service1/upload.

Maintenant, j'ai un autre problème non résolu avec un image.png à partir du dossier Assets /, il continue d'essayer de l'obtenir à partir de http://localhost:7777/assets/image.png au lieu de http://localhost:7777/test/assets/image.png

J'ai testé la deuxième URL, elle renvoie mon image comme demandé. Comment puis-je faire Angular 5 pour trouver mon chemin d'actifs relativement? Dans mon cas, avoir un appel sur http://localhost:7777/test/assets/image.png

Voici comment j'accède à l'image en HTML:

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

Mon href de base dans mon index.html:

<base href="">

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

J'ai la réponse, même si c'est un peu stupide. Le navigateur a mis en cache mon application pour ne pas prendre en compte mes dernières modifications allant de <img src='../../assets/stop_pic.PNG'> à <img src='assets/stop_pic.PNG'>. supprimer toutes les barres obliques de mes images src a fonctionné!

3
Logan Wlv

Définissez votre href de base dans votre index.html comme -

<base href='/'>

Changement -

 "assets": [
            "assets"
          ],

À -

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

Référez l'image dans votre HTML comme:

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