I have a form that uploads an image to S3 and am trying to display the image to the user after it's been uploaded. After uploading the image I get a pre-signed url using the following code.

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;
};

I pass that url into my image tag expecting to see the image but it's not working. I have verified the image is uploaded properly and the url is valid. If I go to the url in the browser the image displays fine. I have also verified that correct url is in the image tag.

I have rendered the image tag in pug using the following:

 .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")

And the following javascript updates the url with the signed url after an api call

  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;
  };