1

El problema es que no puedo establecer la url de una imagen llegada desde una api a mi etiqueta img en mi HTML con la funcion setAttribute(). En el navegador me muestra undifined. Cabe destacar que esto pasa dentro de una promesa.

Dicha imagen proviene de esta API: https://randomuser.me/

HTML

    var boton = document.getElementById("boton").addEventListener("click", cargarPerfil);
    
    var perfil = document.querySelector("#perfil");
    var img_perfil = document.querySelector("#img-perfil");
    var name_perfil = document.querySelector("#name");
    var email_perfil = document.querySelector("#email");
    
    function cargarPerfil() {
        fetch('https://randomuser.me/api')
    
            .then(res => res.json())
    
            .then(data => {
                let img_api = data.results[0].picture.medium
                console.log(img_api)
                
                perfil.innerHTML = `
                    ${img_perfil.setAttribute("src", String(img_api))}
                    ${name_perfil.innerHTML = `NOMBRE: ${data.results[0].name.first}`}
                    ${email_perfil.innerHTML = `EMAIL: ${data.results[0].email}`}
                `
            })
    }
  <body>
        <div class="container my-5 text-center">
            <button id="boton" class="btn btn-dark w-100">Generar</button>
    
            <div id="perfil" class="mt-5">
                <img id="img-perfil" src="" class="img-fluid rounded-circle">
                <p id="name" class="mt-3"></p>
                <p id="email"></p>
            </div>
        </div>
    
        <script src="leerApi.js"></script>
    </body>

2 respuestas 2

2

No entiendo por qué estabas usando templates literales en un innerHTML Te lo dejo corregido.

var boton = document.getElementById("boton").addEventListener("click", cargarPerfil);

var perfil = document.querySelector("#perfil");
var img_perfil = document.querySelector("#img-perfil");
var name_perfil = document.querySelector("#name");
var email_perfil = document.querySelector("#email");

function cargarPerfil() {
    fetch('https://randomuser.me/api')

        .then(res => res.json())

        .then(data => {
            let img_api = data.results[0].picture.medium
            img_perfil.setAttribute("src",img_api);
            name_perfil.innerHTML = `NOMBRE: ${data.results[0].name.first}`;
            email_perfil.innerHTML = `EMAIL: ${data.results[0].email}`;
        })
}
<div class="container my-5 text-center">
        <button id="boton" class="btn btn-dark w-100">Generar</button>

        <div id="perfil" class="mt-5">
            <img id="img-perfil" src="" class="img-fluid rounded-circle">
            <p id="name" class="mt-3"></p>
            <p id="email"></p>
        </div>
    </div>

1
  • No lo entendias porque yo tampoco jaja Es (Fue) mi primer probada de JavaScript :D. Gracias por tu respuesta, me ayudo mucho.
    – GonzaloM
    el 11 ene. 2019 a las 21:51
1

el problema es que tienes innerHTML dentro de innerHTML

innerHTML es peligroso ya que permite injection de codigo tambien no es requerido para tu estructura ya que solo cambias el texto te recomiendo usar textContent

var boton = document.getElementById("boton").addEventListener("click", cargarPerfil);

var perfil = document.querySelector("#perfil");
var img_perfil = document.querySelector("#img-perfil");
var name_perfil = document.querySelector("#name");
var email_perfil = document.querySelector("#email");

function cargarPerfil() {
    var data="";
    fetch('https://randomuser.me/api')

        .then(res => res.json())

        .then(data => {
            let img_api = data.results[0].picture.medium
            img_perfil.setAttribute("src", String(img_api))
            name_perfil.textContent = `NOMBRE: ${data.results[0].name.first}`;
            email_perfil.textContent = `EMAIL: ${data.results[0].email}`;

        })
}
  <div class="container my-5 text-center">
        <button id="boton" class="btn btn-dark w-100">Generar</button>

        <div id="perfil" class="mt-5">
            <img id="img-perfil" src="" class="img-fluid rounded-circle">
            <p id="name" class="mt-3"></p>
            <p id="email"></p>
        </div>
    </div>

2
  • Es decir que indirectamente afecto a la etiqueta img de mi HTML? Si no hubiera explicitado las etiquetas dentro de perfil si estaba bien o también tendría el mismo problema?
    – GonzaloM
    el 11 ene. 2019 a las 21:42
  • Gracias por tu respuesta y la explicacion. Solucionado. Saludos :)
    – GonzaloM
    el 11 ene. 2019 a las 21:52

Tu Respuesta

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

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