Tutorial de JavaScript : Conceptos

Vimos en conceptos anteriores que la respuesta del API fetch podemos utilizar los métodos:

text() - Convertimos el dato devuelto a formato texto.
json() - Convertimos el dato devuelto a formato json.
blob() - Este nuevo método es utilizado entre otros propósitos para recuperar en forma asíncrona imágenes. blob significa Binary Large Objects, objetos binarios grandes.

Problema

Disponer 3 botones con diferentes signos del zodiaco, cuando se presiona el botón procedemos a requerir al servidor un archivo de imagen y proceder a mostrarlo en una etiqueta HTML 'img'.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>
    <div>
        <button id="boton1">Aries</button>
        <button id="boton2">Tauro</button>
        <button id="boton3">Geminis</button>
    </div>
    <img id="foto">

    </div>
    <script>
        document.getElementById("boton1").addEventListener("click", () => mostrar('aries.png'));
        document.getElementById("boton2").addEventListener("click", () => mostrar('tauro.png'));
        document.getElementById("boton3").addEventListener("click", () => mostrar('geminis.png'));


        function mostrar(signo) {
            fetch(signo)
                .then(response => response.blob())
                .then(datos => document.getElementById("foto").setAttribute('src', URL.createObjectURL(datos)));
        }

    </script>

</body>

</html>

Disponemos los tres botones en el bloque HTML con una etiqueta 'img' sin definir la propiedad 'scr' (lo cual hace que en principio no aparezca una imagen):

  <div>
    <button id="boton1">Aries</button>
    <button id="boton2">Tauro</button>
    <button id="boton3">Geminis</button>
  </div>
  <img id="foto">

Cuando se presiona alguno de los botones llamamos a la función mostrar pasando como parámetro el nombre del archivo de imagen que se debe recuperar del servidor:

        document.getElementById("boton1").addEventListener("click", () => mostrar('aries.png'));
        document.getElementById("boton2").addEventListener("click", () => mostrar('tauro.png'));
        document.getElementById("boton3").addEventListener("click", () => mostrar('geminis.png'));

Mediante la API fetch procedemos a solicitar en forma asíncrona que recupere el recurso (en nuestro caso solo indicamos el nombre del archivo ya que se encuentra en la misma carpeta que el archivo HTML que hace la solicitud):

        function mostrar(signo) {
            fetch(signo)

Cuando llega la respuesta del servidor procedemos a retornar a la segunda promesa los datos convertidos a formato binario mediante el método 'blob':

                .then(response => response.blob())

Con los datos convertidos a formato binario mediante el método createObjectURL del objeto URL procedemos a actualizar la propiedad 'src' de la etiqueta HTML 'img':

                .then(datos => document.getElementById("foto").setAttribute('src', URL.createObjectURL(datos)));

Como vemos el algoritmo es muy conciso para recuperar imágenes del servidor mediante la API fetch:

ES6 - API fetch (recuperar archivo de imágen)

Problema

Retornar