Saving an image file within the Vault or a sub folder of the Vault, then displaying that file in a HTMLImageElement

I am having problems with Obsidians filing system and displaying local Vault images.

const blob = await fetch(url).then(res=> res.blob());
await this.app.vault.adapter.writeBinary(imagePath, await.blob.arrayBuffer());
  showImage(el: HTMLElement, imagePath: string) {
    const normalizedFile = normalizePath(imagePath);

    console.log("normalizedFile:", normalizedFile)

    const imageFile:TFile|null = this.app.vault.getFileByPath(normalizedFile);

    if (imageFile)
      this.render(el, this.app.vault.getResourcePath(imageFile));
    else {
      console.log("internal error: image file not found: ", imageFile);
      this.error(el, "internal error: image file not found");
    }
  }
  render(el: HTMLElement, imagePath: string) {
    const div = el.createEl("div");
    const img = div.createEl("img");
    img.src = imagePath;
  }

I am getting

normalizedFile: .images/0984747afbadc2778e292c2df2a66c3dd1dc5ca478c6e3fac26dc0c61905c668.png
internal error: image file not found:  null