Obtengo objetos de s3 y ahora quiero mostrarlos como miniaturas en mi aplicación de reacción, entonces, ¿cómo puedo lograrlo?
var params = { Bucket: BUCKET_NAME, Prefix: 'media', }; s3.listObjects(params, function (err, data) { if (err) console.log(err, err.stack); else { console.log('objects list', data); // successful response } });Obtengo los contenidos en la respuesta, pero la pregunta es ¿cómo puedo mostrarlos en mi aplicación?
Nota : el cubo es privado
Tuve un problema similar en el que tenía que mostrar miniaturas de una API que devolvía blobs ya que este punto final estaba detrás de oAuth y simplemente no podía proporcionar la URL del recurso de la imagen. Supongo que también está recibiendo un flujo de octetos.
Así es como se veía mi llamada axios
images(id: string, cancelToken?: CancelToken): Promise<FileResponse> { let url_ = "pathtoendpoint/{id}"; let options_ = <AxiosRequestConfig>{ cancelToken, responseType: "blob", method: "GET", url: url_, headers: { Accept: "application/octet-stream", Authorization: "Bearer ezfsdfksf...." }, }; return Axios.create().request(options_).then((_response: AxiosResponse) => { return new Promise<FileResponse>(_response.data); }); } export interface FileResponse { data: Blob; status: number; fileName?: string; headers?: { [name: string]: any }; }Luego creo una cadena DOM efímera que contiene un uri
let uri = URL.createObjectURL(data)Una vez que tengo el uri, puedo mostrarlo así
<img src={uri} id="someId" alt="" />Si ayuda a mi código del lado del servidor, le gusta así,
[Produces("application/octet-stream")] public async Task<ActionResult> GetImageById([FromRoute] Guid id) { var resource = await DatalayerService.GetImageAsync(id); return File(resource.Filebytes, resource.ContentType); }