Angular 4 img src is niet gevonden

Ik heb een probleem met het vinden van een afbeelding met hoek 4. Hij blijft me vertellen dat de afbeelding niet is gevonden.

Mapstructuur:

app_folder/
app_component/
  - my_componenet
  - image_folder/
      - myimage

Ik gebruik de afbeelding in mycomponent. Als in mycomponent, voeg ik het rechtstreeks in met:

<img src="img/myimage.png"

Dit werkt prima, maar ik heb de html gecontroleerd en er ontstaat een hash. Maar mijn afbeeldingen moeten dynamisch worden toegevoegd aan de html omdat ze deel uitmaken van een lijst. Dus, als ik gebruik:

<img src="{{imagePath}}">

wat in feite img/myimage.pngis, het werkt niet. Als ik gebruik:

<img [src]="imagePath">

Er staat NOT FOUND (htttps://localhost/img/myimage.png). Kun je me helpen?

Antwoord 1, autoriteit 100%

AngularJS

<img ng-src="{{imagePath}}">

Hoekig

<img [src]="imagePath">

Antwoord 2, autoriteit 93%

Kopieer uw afbeeldingen naar de activamap. Angular heeft alleen toegang tot statische bestanden zoals afbeeldingen en configuratiebestanden uit de activamap.

Probeer als volgt: <img src="assets/img/myimage.png">

Antwoord 3, autoriteit 16%

Maak een afbeeldingsmap onder de activamap

<img src="assets/images/logo_poster.png">

Antwoord 4, autoriteit 11%

Hoekig 4 ​​tot 8

Beide werken

<img [src]="imageSrc" [alt]="imageAlt" />
<img src="{{imageSrc}}" alt="{{imageAlt}}" />

en de Component zou zijn

export class sample Component implements OnInit {
   imageSrc = 'assets/images/iphone.png'  
   imageAlt = 'iPhone'

Boomstructuur:

-> src 
   -> app
   -> assets
      -> images
           'iphone.png'

Antwoord 5, autoriteit 9%

wijs in uw component een variabele toe zoals,

export class AppComponent {
  netImage:any = "../assets/network.jpg";
  title = 'app';
}

gebruik deze netImage in je src om de afbeelding te krijgen, zoals hieronder weergegeven,

<figure class="figure">
  <img [src]="netImage" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Antwoord 6, autoriteit 6%

@Annk je kunt een variabele maken in het bestand __component.ts

myImage : string = “http://example.com/path/image.png“;

en in het bestand __.component.html kunt u een van deze 3 methoden gebruiken:

1 .

<div> <img src="{{myImage}}"> </div>

2 .

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

3 .

<div> <img bind-src="myImage"/> </div>

Antwoord 7, autoriteit 4%

Nou, het probleem was dat het pad op de een of andere manier niet werd herkend toen het door een variabele in srcwerd ingevoegd. Ik moest een variabele maken zoals deze:

path:any = require("../../img/myImage.png");

en dan kan ik het gebruiken in src. Bedankt iedereen!

Antwoord 8, autoriteit 2%

<img src="images/no-record-found.png" width="50%" height="50%"/>

Uw afbeeldingenmap en uw index.html zouden in dezelfde map moeten staan ​​(volg de volgende mapstructuur).
het werkt zelfs na het bouwen

Mapstructuur

-src
    |-images
    |-index.html
    |-app 

Antwoord 9, autoriteit 2%

Angular heeft alleen toegang tot statische bestanden zoals afbeeldingen en configuratiebestanden uit de activamap. Leuke manier om het tekenreekspad van een op afstand opgeslagen afbeelding te downloaden en in een sjabloon te laden.

 public concateInnerHTML(path: string): string {
     if(path){
        let front = "<img class='d-block' src='";
        let back = "' alt='slide'>";
        let result = front + path + back;
        return result;
     }
     return null;
  }

In een component implementeer je de DoCheck-interface en vul je daarin de formule voor de database in. Databasequery is slechts een voorbeeld.

ngDoCheck(): void {
   this.concatedPathName = this.concateInnerHTML(database.query('src'));
}

En in html tamplate <div [innerHtml]="concatedPathName"></div>

Antwoord 10

Je moet de breedte van de afbeelding als standaard vermelden

<img width="300" src="assets/company_logo.png">

het werkt voor mij op basis van alle andere alternatieve manieren.

Antwoord 11

Een belangrijke observatie over hoe Angular 2, 2+ attribuutbindingen werken.

Het probleem met [src]="imagePath"werkt niet terwijl het volgende wel werkt:

• <img src="img/myimage.png">
• <img src={{imagePath}}>

Is uw bindende verklaring verschuldigd, [src]="imagePath"is direct gebonden aan this.imagePathvan Component of als het deel uitmaakt van een ngFor-lus, dan *each.imagePath.

Bij de andere twee werkopties bind je ofwel een string op HTML of laat je HTML binden aan een variabele die nog moet worden gedefinieerd.

HTML geeft geen foutmelding als je <img src=garbage*Th_i$.ngs>bindt, maar Angular wel.

Mijn aanbeveling is om een inline-if te gebruiken voor het geval de variabele niet is gedefinieerd, zoals <img [src]="!!imagePath ? imagePath : 'urlString'">, wat kan zijn als node.src = imagePath ? imagePath : 'something'.

Vermijd binding aan mogelijk ontbrekende variabelen of maak goed gebruik van *ngIfin dat element.

Antwoord 12

Check uw.angular-cli.json in onder app -> activa:[] als u de activamap heeft opgenomen.

Of misschien iets hier: https://github.com/angular/angular- cli/issues/2231, kan helpen.

Antwoord 13

U moet deze code hoekig gebruiken om het afbeeldingspad toe te voegen. als uw afbeeldingen zich in de map activa bevinden, dan.

<img src="../assets/images/logo.png" id="banner-logo" alt="Landing Page"/>

indien niet in de activamap, kunt u deze code gebruiken.

<img src="../images/logo.png" id="banner-logo" alt="Landing Page"/>

Antwoord 14

Angular-cli neemt standaard de activamap op in de build-opties. Ik kreeg dit probleem toen de naam van mijn afbeeldingen spaties of streepjes had.
Bijvoorbeeld:

• ‘my-image-name.png’ moet ‘myImageName.png’ zijn
• ‘mijn afbeeldingsnaam.png’ moet ‘mijnAfbeeldingsnaam.png’ zijn

Als u de afbeelding in de map assets/img plaatst, zou deze regel code in uw sjablonen moeten werken:

<img [alt]="My image name" src="./assets/img/myImageName.png'">

Als het probleem zich blijft voordoen, controleer dan of uw Angular-cli-configuratiebestand en zorg ervoor dat uw activamap is toegevoegd aan de build-opties.

Antwoord 15

Toevoegen in angular.json

 "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

En gebruik het dan als volgt: <img src={{imgPath}} alt="img"></div>

En in ts: storyPath = 'assets/images/myImg.png';

Antwoord 16

Probeer dit:

<img class="img-responsive" src="assets/img/google-body-ads.png">