it-swarm.com.de

Winkel 6 Fehler beim Laden von Bildern aus Assets

Aus irgendeinem Grund kann ich meine Bilder nicht in meiner App anzeigen lassen .. Dies ist der Fehler, die Tests und die Klasse: 

The error: GET http://localhost:4200/assets/image.png 404 (Not Found)

<img class="logo" src="../../assets/image.png">
<img class="logo" src="../assets/image.png">
<img class="logo" src="assets/image.png">
//None of these work

.logo {
    height: 100px;
    width: auto;
    padding: 10px;
    display: block;
    margin: 0 auto;
}

Irgendeine Idee, warum das nicht funktioniert? Mein image.png befindet sich in meinem Assets-Ordner, der sich unter src/assets/image.png befindet.

Aktualisieren:

Also haben wir einen Test gemacht. Wir haben alle Knotenmodule und Projektdateien auf einen anderen PC kopiert und die Bilder dort korrekt geladen. Ich gehe also davon aus, dass das Problem außerhalb des Winkelprojekts liegt.

3
Frank

Das Problem ist also, dass das Winkelprojekt an einem Ort lag, an dem es einen Fehler verursachte. In meinem Fall lag es in einem Bitbucket-Repository. Ich bin nicht sicher, ob dies der Grund für den Fehler ist.

Verschieben Sie das gesamte Winkelprojekt an einen anderen Ort. Das hat es für mich gelöst :)

Die Lösung von @ Rak2018 ist eine gute Lösung, wenn Sie diese stattdessen verwenden möchten

1
Frank

Fügen Sie Ihrem angle.json den Ordner "assets" hinzu.

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

Dann beziehen Sie sich auf die Bilder wie unten,

<img src="/assets/image.png">

Das sollte funktionieren.

3
jkumaranc

Versuchen Sie diesen <img class="logo" src="./assets/image.png">

klicken Sie auch mit der rechten Maustaste auf Ihr Bild und prüfen Sie, ob die Erweiterung PNG anstelle von PNG ist. Wenn dies der Fall ist, schreiben Sie image.PNG

1
Alen

src="assets/image.png" sollte ohne Probleme funktionieren. Haben Sie Ihren Build neu gestartet, seit Sie das Image hinzugefügt haben?

1

Versuche dies:

<div class="logo"></div>

.logo {
    height: 100px;
    width: auto;
    padding: 10px;
    display: block;
    margin: 0 auto;
    background:url('assets/image.png') no-repeat center center;
}
1
Rak2018
<img class="logo" src="assets/image.png">

Dies ist der richtige Weg, wahrscheinlich ist etwas anderes schief gegangen.

Überprüfen Sie, ob der Bildname oder das JPEG-Bild vorhanden ist. Vielleicht haben Sie einen neuen Ordner im Assets-Ordner hinzugefügt? Wie Bilder, wenn der Code so aussehen sollte 

<img class="logo" src="assets/image/image.png">
1
Matan Shushan

Der Ordner, der Ihre Assets (wie Bilder) enthält, muss in Assets Array in Ihrer angle.json deklariert werden

Angular erkennt nur die Assets an, die in angle.json deklariert wurden, oder die Assets, die aus dem Web stammen.

Darüber hinaus funktionieren die folgenden drei Optionen für Sie:

<img class="logo" src="assets/image.png">
0
Pankkaj

Ich hatte das gleiche Problem, das ich gerade gelöst habe. __ Versuchen Sie, aus dem "src" -Verzeichnis genau wie unten aufzurufen:.

0
user135740

Nach anderen Tutorials im Web habe ich ein src\app\assets\images Ordner und legen Sie mein Bild dort. Meine App hatte jedoch bereits einen Assets-Ordner in src\assets. Hierfür gibt es zwei Korrekturen.

Entweder:

  1. Setze mein Bild in das bestehende src\assets Ordner und Referenz als <img src="src\assets\my-image.png"/> oder
  2. Hinzufügen src\app\assets auf meine angle.json Vermögenserklärung und Verweis, wie es meine ursprüngliche Absicht war src\app\assets\images\my-image.png.
0
Chris Knight

es liegt daran, dass Sie nicht berechtigt sind, auf Dateien zuzugreifen.

einfacher Weg in Windows Verschieben Sie Ihr Projekt von Laufwerk C: auf ein anderes Laufwerk. es funktioniert gut.

Viel Glück.

0
Ali Safari

Ich hatte dasselbe Problem, dies hat sich als ein Problem erwiesen, das auf dem Pfad von Bedeutung ist.

In meinem Fall befand sich Image-Ordner unter Assets in Capital I auf dem Image-Ordner. /assets/Images/angularconnect-shield.png

Überprüfen Sie daher Ihren Bildpfad und vergewissern Sie sich, dass er genau mit dem übereinstimmt.

0
Maddy

Ich hatte auch das gleiche Problem. und für mich war das Hinzufügen eines '/' vor dem Assests-Verzeichnis:

0
Aharon Ohayon