web-dev-qa-db-fra.com

Angular 2 img src dans un chemin relatif

Le guide de style johnpapa Angular 2 suggère une approche dossier par fonctionnalité. Je comprends, vous pouvez créer de petits composants angulaires autonomes qui peuvent être réutilisés.

J'ai donc créé un composant que je voulais réutiliser dans un autre projet et le mettre dans son propre dossier. J'ai également ajouté une image que je voulais que ce composant affiche dans le même dossier, donc tout est autonome.

<img class="logo" src="logo.png"/>

Mais ceci essaye alors de charger l'image de la racine localhost:3000/logo.png. 

Je suppose que cela signifie que je dois utiliser le chemin exact de l'image, mais cela ne nuit-il pas à l'idée de composants pouvant être réutilisés dans d'autres projets par d'autres personnes?

Des suggestions à ce sujet?

Editer pour clarifier J'utilise la structure de dossiers du quickstart Angular 2, ce qui signifie que mon dossier racine est:

app/
node_modules/
index.html
package.json
tsconfig.json

Donc, même si j'utilise le chemin header/logo.png, cela ne fonctionne pas. Je dois faire app/header/logo.png. C’est effectivement un chemin absolu qui fonctionne également si j’ajoute une barre oblique: "/app/header/logo.png". Tout ce qui est inférieur au chemin complet rompt le lien. Cela signifie que si quelqu'un veut réutiliser cela, il doit posséder exactement la même structure de dossiers.

Je suppose que c’est comme ça que ça fonctionne, j’apprends seulement Angular 2, mais dans mon esprit, je devrais pouvoir charger des actifs depuis un dossier de composants comme je le peux avec le modèle ou le css

javascriptangular
24
Rob Louie

J'utilise webpack et j'ai pu surmonter ce problème en requireing l'image du composant en tant que variable et en l'utilisant dans mon modèle. 

En effet, pendant la phase de regroupement, Webpack chargera la ressource et stockera l'URL correcte. Les appels requis, au moment de l'exécution, obtiendront cette URL correcte à transmettre au modèle.

Exemple

Utilisation de la structure de répertoire suivante

app/
    header/
        header.component.ts
        header.component.html
        assets/
            logo.png
...

header.component.ts 

...
@Component({
    selector: 'header',
    templateUrl: './header.component.html', // Auto required by webpack
})
export class HeaderComponent {
    private LOGO = require("./assets/logo.png");

    constructor() {};
}

header.component.html 

<div>
    <img [src]="LOGO" />
</div>

Certes, cela lie le composant et le modèle, mais le composant doit être dans le composant pour que Webpack puisse l’analyser et le charger lors de l’assemblage.

Avec cette approche, j'ai empaqueté mon module à l'aide de npm et je l'ai installé et utilisé dans un autre projet, qui utilise également webpack.

Je suis encore à tester avec SystemJS.

25
David Blaney

Je voudrais résoudre ce problème en scindant le chemin src en 2 parties, comme ceci:

<img class="logo" [src]="(imgPath + imgFileName)" />

puis, dans la définition du composant, vous définissez:

@Input() imgPath:string = "app/header/";
imgFileName:string = "logo.png";

En utilisant le décorateur @Input (), la variable imgPath peut être vue de l'extérieur. Ainsi, si vous déplacez le composant à un autre endroit, vous pouvez définir un chemin différent, ce qui le rendra réutilisable.

2
rekotc

Si le problème est une erreur 404, vous devez modifier votre chemin. 

depuis chemin/image ( racine/chemin/image ,/chemin/image etc.) 

vers ./path/image

Ensuite, cela devrait fonctionner s'il n'y a pas d'autres problèmes.

0
serehactka

Utilisez un dossier d’actifs dans votre racine contenant l’image du logo.

0
Mackelito

Découvrez cette réponse: comment afficher des images dans angular2

La clé consiste à le placer dans le dossier "assets" ou à modifier votre fichier ".angular-cli.json" (section assets) pour inclure l'emplacement où se trouve l'image. Ceci est également vrai pour d’autres ressources censées être servies, par exemple des feuilles de style.

0
Papa Stahl