html - error - Angular 4 Img src no funciona

on image error ionic

Question

Tengo un problema con la imagen src en angular 4. Sigue diciéndome que no se encuentra la imagen.

estructura de carpetas: Here

Estoy usando la imagen en mi componente. Si en mi componente inserto directamente

<img src="img/myimage.png"

Funciona bien, pero revisé el html y crea un hash. Pero mis imágenes tienen que agregarse dinámicamente al html porque son parte de una lista. Entonces, si uso:

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

que básicamente es "img / myimage.png" no funciona. Si yo uso

<img [src]="imagePath">

Dice NO ENCONTRADO (htttps: //localhost/img/myimage.png). ¿Me puedes ayudar?

Answer 1

@Annk puedes hacer una variable en el archivo __component.ts

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

y dentro del archivo __. component.html puedes usar uno de esos 3 métodos:

1)

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

2)

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

3)

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

Answer 2

Añadir en angular.json

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

Y luego <img src={{imgPath}} alt="img"></div> así: <img src={{imgPath}} alt="img"></div>

Y en ts: storyPath = ''assets/images/myImg.png'';

Answer 3

Angular solo puede acceder a archivos estáticos como imágenes y archivos de configuración desde la carpeta de activos. Buena manera de descargar la ruta de la cadena de la imagen almacenada remota y cargarla en la plantilla.

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

En una interfaz DoCheck de imlement Component y pasado en su fórmula para base de datos. La consulta de la base de datos es solo una muestra.

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

Y en html tamplate <div [innerHtml]="concatedPathName"></div>

Answer 4

Angular-cli incluye la carpeta de activos en las opciones de compilación de forma predeterminada. Recibí este problema cuando el nombre de mis imágenes tenía espacios o guiones. Por ejemplo :

• ''my-image-name.png'' debería ser ''myImageName.png''
• ''my image name.png'' debería ser ''myImageName.png''

Si coloca la imagen en la carpeta assets / img, esta línea de código debería funcionar en sus plantillas:

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

Si el problema persiste, solo verifique si su archivo de configuración Angular-cli y asegúrese de que su carpeta de activos esté agregada en las opciones de compilación.

Answer 5

AngularJS

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

Angular

<img [src]="imagePath">

Answer 6

Bueno, el problema era que, de alguna manera, la ruta no se reconocía cuando una variable la insertaba en src. Tuve que crear una variable como esta:

ruta de acceso: any = require ("../../ img / myImage.png");

y luego puedo usarlo en src. ¡Gracias a todos!

Answer 7

Compruebe su.angular-cli.json en la aplicación -> activos: [] si ha incluido la carpeta de activos.

O tal vez algo aquí: https://github.com/angular/angular-cli/issues/2231 , puede ayudar.

Answer 8

Copie sus imágenes en la carpeta de activos. Angular solo puede acceder a archivos estáticos como imágenes y archivos de configuración desde la carpeta de activos.

Intente así: <img src="assets/img/myimage.png">

Answer 9

Crear carpeta de imágenes debajo de la carpeta de activos

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

Answer 10

Debe mencionar el ancho de la imagen como predeterminado

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

está funcionando para mí basado en todas las otras formas alternativas.

Answer 11

Debe usar este código en angular para agregar la ruta de la imagen. si sus imágenes están en la carpeta de activos entonces.

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

si no está debajo de la carpeta de activos, puede usar este código.

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

Answer 12

Prueba esto:

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

Answer 13

Una observación importante sobre cómo funcionan los enlaces de atributos Angular 2, 2+.

El problema con [src]="imagePath" no funciona mientras que lo siguiente:

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

Debido a su declaración de enlace, [src]="imagePath" está directamente vinculado al componente this.imagePath o si es parte de un bucle ngFor, entonces *each.imagePath .

Sin embargo, en las otras dos opciones de trabajo, puede vincular una cadena en HTML o permitir que HTML se vincule a una variable que aún no se ha definido.

HTML no arrojará ningún error si vincula <img src=garbage*Th_i$.ngs> , sin embargo, Angular lo hará.

Mi recomendación es usar un if-inline en caso de que la variable no esté definida , como <img [src]="!!imagePath ? imagePath : ''urlString''"> , que puede ser como node.src = imagePath ? imagePath : ''something'' node.src = imagePath ? imagePath : ''something'' .

Evite vincular a posibles variables faltantes o haga un buen uso de *ngIf en ese elemento.

Answer 14

en su componente asigne una variable como,

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

use esta netImage en su src para obtener la imagen, como se muestra a continuación,

<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>

Answer 15

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

Su carpeta de imágenes y su index.html deben estar en el mismo directorio (siga la siguiente estructura de directorios). incluso funcionará después de construir

Estructura de directorios

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