webentwicklung-frage-antwort-db.com.de

Pfad zu Bildern, die in meinem nicht funktionieren Angular 4 datei

Ich bin ein Anfänger im Erlernen des Winkel-4-Frameworks und habe alle Threads zu diesem Problem in stackoverflow gesehen, aber die darin enthaltenen Lösungen konnten mein Problem nicht lösen.

Ich erhalte diese Fehlermeldung "http: // localhost: 4200/src/assets/images/1.jpg 404 (nicht gefunden) ". Alle anderen Dinge funktionieren gut, aber nur das Bild ist Ich werde nicht geladen. Ich gebe meinen .angular-cli.json-Code und meinen benutzerdefinierten Komponentencode an die Stelle, an der ich mein img-Tag gegeben habe.

Mein benutzerdefinierter Komponentencode: -

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";
}

Mein 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": {
    }
  }
}

Kann mir jemand sagen, was das Problem hier ist. Vielen Dank im Voraus !!

4
Sahil Aggarwal

Sie sollen Bilder in den Assets-Ordner im SRC-Ordner legen. Dann können Sie den Pfad als assets/../image.png angeben.

 enter image description here  enter image description here

3
Bert lucas

Vergrößern Sie die Abmessungen des Bildes in Paint. Ich hatte ein Bild im Pfad src/assets/Library/Images mit den Abmessungen 60 x 45, das nicht geladen wurde, und ein Bild mit den Abmessungen 225 x 225, das erfolgreich geladen wurde. Hoffe das hilft !

0
pnklshh

Es sollte sein

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

und stellen Sie sicher, dass Sie <base href="/"> im index.html <head>-Tag haben

0
Vega

Versuche dies,

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

Unter der Annahme, dass sich Ihre HelloComponent im Ordner "src > app" befindet, sollte das Bild mit dem folgenden Tag angezeigt werden:

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

Wenn es immer noch nicht angezeigt wird, ziehen Sie das Bild aus dem Asset-Ordner und legen Sie es in einer der .html-Dateien im Ordner der tge-App ab, wenn Sie eine IDE fir-Entwicklung verwenden. Überprüfen Sie den Pfad zur Image-Quelle dort.

0
Faisal

Sehen Sie sich den Ordner/dest (oder was auch immer Sie als Ausgabe Ihres Webpacks konfiguriert haben) an, in dem die App bereitgestellt wird. Sehen Sie einen Pfad, der dem angeforderten Pfad entspricht? Wenn nicht, kann der Browser sie natürlich nicht laden. 

Dies liegt daran, dass Webpack (oder der von Ihnen verwendete Packager) nicht wissen kann, welche Assets in die endgültige Bereitstellung Ihrer Anwendung einbezogen werden sollen, sofern Sie es nicht wissen. Die Dateien sind also nicht vorhanden. Daher können Sie Webpack entweder mit einem Dateilader (oder einem URL-Loader) konfigurieren, um Ihre Bilder in einem Pfad in der Zielordnerstruktur auszugeben, oder Sie können Eigenschaften für Ihre Komponente auf den Rückgabewert des Requirement (hier: meine Bild-URL) setzen ') Funktion, z this.myIcon = required ('images/abc.png'). Verwenden Sie diese Eigenschaften, um eine Attributbindung für Ihr IMG-Tag vorzunehmen, z 

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

Dies führt dazu, dass die Bytes des Bildes über eine data: url direkt in das src-Attribut eingebettet werden. Überprüfen Sie das letzte Element in Chrome, um zu sehen. (Dieser letzte Teil ist vielleicht nicht genau richtig, aber etwas übersetzt die Bilder definitiv in Base64-kodierte Daten für Ihre IMG-Quellen, damit sie erscheinen, ohne im Zielordner vorhanden zu sein.)

IMHO ist dies ein großes Manko mit etwas wie dem Angular 2-Ansatz mit Webpack. Sie müssen so viel Mist konfigurieren, dass nur eine brauchbare Anwendung erstellt werden kann, sodass Sie möglicherweise die gesamte Plattform überdenken. Je besser Sie diesen Teil des gesamten Angular 2-Lieferprozesses lernen, desto glücklicher werden Sie sein. Hier ist ein Link zu einem Artikel, der hilfreich sein kann: https://medium.com/a-beginners-guide-for-webpack-2/copy-all-images-filesto-afolder-using-copy- webpack-plugin-7c8cf2de7676

0
Wade

Ändern Sie Ihren Ordnerpfad From

E:\Daten\Projekt - 1\Winkel (Lernen)\App

zu

E:\Daten\Projekt1\Winkel (Lernen)\App

0
Laxman Mekala