Tengo un formulario que carga una imagen en S3 y trato de mostrar la imagen al usuario después de que se haya cargado. Después de cargar la imagen, obtengo una URL prefirmada con el siguiente código.

 export const getUrlFromPath = async (filePath) => { filePath = splitUrl(filePath); const bucketPath = `${process.env.S3_UPLOAD_BUCKET}`; const s3Params = { Bucket: bucketPath, Key: filePath, }; const command = new GetObjectCommand(s3Params); try { const signed = await getSignedUrl(s3Client, command, { expiresIn: 30 }); return signed; } catch (e) { console.log(e); } return null; };

Paso esa URL a mi etiqueta de imagen esperando ver la imagen, pero no funciona. He verificado que la imagen se cargó correctamente y que la URL es válida. Si voy a la URL en el navegador, la imagen se muestra bien. También verifiqué que la URL correcta está en la etiqueta de la imagen.

He renderizado la etiqueta de la imagen en pug usando lo siguiente:

 .col-md-4 #file-preview-wrapper.big-bordered-wrapper.d-none p | Document Preview a#remove-file.text-danger.float-end(href="#") Remove img.d-none.full-width(src="" id="img-preview") embed.d-none.full-width(src="" id="pdf-preview" height="400" type="application/pdf")

Y el siguiente javascript actualiza la URL con la URL firmada después de una llamada API

 const previewUrl = (url) => { pdfPreview.src = ""; imgPreview.src = ""; previewWrapper.classList.add("d-none"); if (url === "") { return; } previewWrapper.classList.remove("d-none"); if (url.match(/pdf/)) { pdfPreview.src = url; pdfPreview.classList.remove("d-none"); } else { imgPreview.src = url; imgPreview.classList.remove("d-none"); } formSubmit.disabled = false; };