0

quería consultar:

Tengo un componente que realiza una llamada REST a una API y recibe una PROMESA. En esa promesa hay un enlace a una imagen. El caso es que no se como mostrar esa imagen en el HTML. Cuando lo consigo se me muestra con el enlace (url) que contiene esa imagen pero quiero que solo se me muestre la imagen. Este mismo proyecto lo hice en React y en la misma etiqueta "< img >" inyectaba la imagen pero aquí no me funciona.

Muestro Código:

  async buscar(){
    this.ocultar();     //Este Método es indiferente para la pregunta en cuestión
    let pelicula = encodeURIComponent(this.movie);
    const respuesta= await this.wS.getPelicula(pelicula) // llamo al servicio que 
                                                          //efectúa la llamada
     console.log(respuesta);
     this.titulo = respuesta.Title;
     this.portada = respuesta.Poster; //AQUÍ TENGO LA URL CON LA IMAGEN QUE DESEO 
                                       //MOSTRAR
  }

Esta es la respuesta Promesa que recibo al buscar por ejemplo la película TITANIC

Object

Actors: "Leonardo DiCaprio, Kate Winslet, Billy Zane, Kathy Bates"

Awards: "Won 11 Oscars. Another 112 wins & 83 nominations."

BoxOffice: "N/A"

Country: "USA, Mexico, Australia, Canada"

DVD: "N/A"

Director: "James Cameron"

Genre: "Drama, Romance"

Language: "English, Swedish, Italian, French"

Metascore: "75"

Plot: "A seventeen-year-old aristocrat falls in love with a kind but poor artist aboard the luxurious, ill-fated R.M.S. Titanic."

Poster: "https://m.media-amazon.com/images/M/MV5BMDdmZGU3NDQtY2E5My00ZTliLWIzOTUtMTY4ZGI1YjdiNjk3XkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_SX300.jpg"

Production: "20th Century Fox, Lightstorm Entertainment, Paramount Pictures"

ETC....

y este es el Html:

<form>
    <div class="form-group">
        <div class="row">  
            <label for="formGroupExampleInput">Introduzca Título de Película: </label>
        </div>    
        <div class="row"> 
            <input type="text" [(ngModel)]="movie" class="form-control pelicula" name="movie" 
               placeholder="Título de Película">
            <button class="btn boton btn-warning" (click)="buscar()">MOSTRAR</button>
        </div>    
        <div class="row" >
            <label>{{titulo}} </label>
            {{portada}}    <!-- si lo hago así se me muestra o la imagen con la URL o sólo la URL -->
        </div>
    </div>
</form>

Como he dicho antes, si abro una etiqueta "< img >" {{portada}} No me sale la imagen.

Gracias de antemano.

4
  • deberías utilizar el atributo <img [src]="portada"> en angular 2+ y en angularJS <img ng-src="{{portada}}"> Echa una prueba y si te vale, te escribo la solución completa el 23 nov. 2020 a las 12:22
  • Increible! Muchas gracias. Me traía ya de cabeza y por mas que he buscado no he encontrado esa sintaxis. Genial me lo anoto. Muchas gracias de verdad el 23 nov. 2020 a las 12:27
  • Cuál tienes? AngularJS o Angular2.x? (ME ALEGRO!!) el 23 nov. 2020 a las 12:30
  • 1
    Estoy con Angular v.10 " <img [src]="portada"> " Esto me ha valido. Gracias! el 23 nov. 2020 a las 12:47

1 respuesta 1

1

Debes utilizar el atributo de AngularJS ng-src o el equivalente en angular 2.X [src] (ahí angular substituirá su valor y lo meterá dentro del src normal)

Respuesta para Angular 2.X

async buscar(){
  
    let pelicula = encodeURIComponent(this.movie);
     this.titulo = "Titulo"
     this.portada = respuesta.Poster; 
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<form>
    <div class="form-group">
        <div class="row">  
            <label for="formGroupExampleInput">Introduzca Título de Película: </label>
        </div>    
        <div class="row"> 
            <input type="text" [(ngModel)]="movie" class="form-control pelicula" name="movie" 
               placeholder="Título de Película">
            <button class="btn boton btn-warning" (click)="buscar()">MOSTRAR</button>
        </div>    
        <div class="row" >
            <label>{{titulo}} </label>
            <img [src]="portada">
        </div>
    </div>
</form>

Respuesta para AngularJS

async buscar(){
  
    let pelicula = encodeURIComponent(this.movie);
     this.titulo = "Titulo"
     this.portada = respuesta.Poster; 
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<form>
    <div class="form-group">
        <div class="row">  
            <label for="formGroupExampleInput">Introduzca Título de Película: </label>
        </div>    
        <div class="row"> 
            <input type="text" [(ngModel)]="movie" class="form-control pelicula" name="movie" 
               placeholder="Título de Película">
            <button class="btn boton btn-warning" (click)="buscar()">MOSTRAR</button>
        </div>    
        <div class="row" >
            <label>{{titulo}} </label>
            <img ng-src="{{portada}}">
        </div>
    </div>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.