web-dev-qa-db-fra.com

Chemin vers les images ne fonctionnant pas dans mon Angular 4 fichier

Je suis un débutant dans l’apprentissage angular 4 framework et j’ai vu toutes les discussions concernant ce problème sur stackoverflow, mais les solutions qu’ils proposent ne sont pas en mesure de résoudre mon problème.

Je reçois cette erreur "http: // localhost: 4200/src/assets/images/1.jpg 404 (introuvable) " .Toutes les autres choses fonctionnent correctement, mais seule l'image est Je donne mon code .angular-cli.json et mon code de composant personnalisé, où j’ai donné ma balise img.

Mon code de composant personnalisé: - 

import { Component } from '@angular/core';


@Component({
    selector:'my-comp',
    template:`<button (mousemove)="clicked($event)">{{name1}}</button>
                <div *ngIf="applyDiv==false">WTF</div>
                <ul>
                    <li *ngFor="let i of a;let j=index">{{j}}.{{i}}</li>
                </ul>    

                <img src="../../src/assets/images/1.jpg" alt="Ms dhoni" width="2000" height="2000"/>
                <input type="text" name="Sahil" value="sahil"/>
                <div [class.myClass]="myclass">Apply Class</div>
                <div [style.color]="applyBlue?'blue':'yellow'">Starting Angualr</div>`,
    styleUrls:['./hello.component.css']


})

export class HelloComponent {
    name='Angular1';
    myclass=true;
    applyBlue=true;
    name1=0;
    applyDiv=false;
    a=[1,'2','3iituit'];
    clicked(event){
        console.log(event.target);
        this.name1++;
    }
   // name1:string="sahil";
    //logo="../../assets/images/mov2.jpg";
}

Mon code .angular-cli.json: - 

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-app"

  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [

        "assets/images",
        "favicon.ico"
      ],
      "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"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {
    }
  }
}

Quelqu'un peut-il me dire quel est le problème ici. Merci d'avance !!

javascriptjsonangular
4
Sahil Aggarwal

Vous êtes censé placer des images dans le dossier des ressources qui se trouve dans le dossier src, vous pouvez alors spécifier le chemin comme assets/../image.png

 enter image description here  enter image description here

3
Bert lucas

Essayez d'augmenter les dimensions de l'image dans Paint. J'ai eu une image dans le chemin src/assets/Bibliothèque/Images aux dimensions 60 x 45 qui ne se sont pas chargées et une image aux dimensions 225 x 225 qui se sont chargées avec succès. J'espère que cela t'aides !

0
pnklshh

CA devrait etre

   <img src="assets/images/1.jpg" alt="Ms dhoni" width="200px" height="200px"/>

et assurez-vous d'avoir <base href="/"> dans la balise index.html <head>

0
Vega

Essaye ça,

<img [src]="../../src/assets/images/1.jpg" alt="Ms dhoni" width="2000" height="2000"/>
0
Sajeetharan

En supposant que votre HelloComponent se trouve dans le dossier "src > app", la balise suivante devrait afficher l'image:

<img src="../../assets/images/1.jpg" 
          alt="Ms dhoni" 
          width="2000" height="2000"/>

S'il ne s'affiche toujours pas, si vous utilisez un développement IDE fir, faites glisser l'image du dossier des ressources et déposez-la dans l'un des fichiers .html du dossier de l'application. Vérifiez le chemin de l'image src là.

0
Faisal

Jetez un coup d'œil au dossier/dest (ou à tout ce que vous avez configuré comme sortie de votre Webpack) où l'application est servie. Voyez-vous un chemin correspondant au chemin demandé? Sinon, le navigateur ne pourra évidemment pas le charger. 

En effet, Webpack (ou le conditionneur que vous utilisez) ne dispose d'aucun moyen de savoir quels actifs inclure dans le déploiement final de votre application, à moins que vous ne le lui indiquiez - les fichiers ne sont donc pas là. Par conséquent, vous pouvez configurer Webpack avec un chargeur de fichiers (ou url-loader) pour exporter vos images vers un chemin situé dans la structure du dossier de destination ou définir les propriétés de votre composant sur la valeur de retour de require ('mon image url ici ') fonction, par exemple this.myIcon = require ('images/abc.png'). Utilisez ces propriétés pour créer une liaison d'attribut sur votre balise IMG comme 

<img [attr.src]="myIcon" />

Ainsi, les octets de l'image seront directement incorporés dans l'attribut src via un data: url (inspectez le dernier élément dans Chrome pour voir). (Cette dernière partie n’est peut-être pas tout à fait exacte, mais quelque chose traduit les images en données codées en base64 pour vos src IMG afin qu’elles n'apparaissent pas dans le dossier de destination.)

IMHO, c'est une grosse lacune avec quelque chose comme l'approche Angular 2 avec Webpack. Vous devez configurer tellement de merde pour produire une application utilisable qui peut éventuellement vous inciter à reconsidérer la totalité de la plate-forme. Mieux vous apprendrez cette partie du processus de livraison Angular 2 à l’avance, plus vous serez heureux. Voici un lien vers un article qui peut aider: https://medium.com/a-beginners-guide-for-webpack-2/copy-all-images-files-to-a-folder-using-copy- webpack-plugin-7c8cf2de7676

0
Wade

Changez le chemin de votre dossier De

E:\Data\project - 1\Angular (apprentissage)\app

À

E:\Data\project1\Angular (apprentissage)\app

0
Laxman Mekala