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>