El objetivo es mostrar la foto del avatar de un usuario autenticado.
back-end y front-end tienen servidores separados y están usando una API tranquila y estoy usando vanilla js para enviar una solicitud GET para obtener el avatar y mostrarlo.
esto es lo que devuelvo en el controlador laravel:

 return response()->file(base_path() . '/storage/app/images/avatars/1.jpeg', ['Content-Type' => 'Image/jpeg']); // also tryed these but no luck // return response()->download(Storage::disk('local')->get('images/avatars/1.jpeg'), 'name', ['Content-Type' => 'Image/jpeg']); // return Storage::disk('local')->get('images/avatars/1.jpeg'); // return response()->file(Storage::disk('local')->get('images/avatars/1.jpeg'));

y así es como configuro el avatar del usuario:

 Storage::putFileAs('images/avatars/', $request->avatar, $request->accountId, 'private');

y en front-end: (soy nuevo en front-end y con js)

 let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content'); let myRequest = new Request('avatar'); let myHeaders = new Headers(); myHeaders.append("Accept", "application/json, text-plain, */*"); myHeaders.append("X-Requested-With", "XMLHttpRequest"); myHeaders.append("X-CSRF-TOKEN", token); myHeaders.append("Content-Type", 'image/jpeg/jpg'); let init = { method: 'GET', mode: 'cors', credentials: 'same-origin', headers: myHeaders, }; fetch(myRequest, init).then((response) => { console.log(response); return getBody(response); }).then((data) => { console.log(data); createAppendElm('img', { 'src': 'data:image/jpeg;base64,' + btoa(data), 'alt': 'avatar' }, getElm('box')); }); function createAppendElm(tagName, attributes, parentElm) { var elm = document.createElement(tagName); for (const attribute in attributes) { if (Object.hasOwnProperty.call(attributes, attribute)) { const value = attributes[attribute]; elm.setAttribute(attribute, value); } } parentElm.appendChild(elm); return elm; } function getBody(response) { const contentType = response.headers.get("content-type"); if (contentType && contentType.indexOf("application/json") !== -1) { return response.json(); } else { return response.text(); } }

console.log(data) muestra el contenido binario de la imagen.(���� ...)
¿alguna sugerencia?