Get image as array buffer and display

I have written a file to an array buffer and stored on IPFS. At another point I wish to pull this buffer from IPFS and have the image displayed on the page. I am struggling with this as the blob does not seem to be located.

Adding photo as array buffer:

// Read photo
let photoFile = e.target.photo.files[0];
let reader = new window.FileReader();
let that = this;
reader.onloadend = function (e) {
  let res = reader.result;
  that.setState({photoString: res});
}

if (photoFile) {
  await reader.readAsArrayBuffer(photoFile);
}

// Add photo to IPFS
await ipfs.add(photoFile).then(async (result, error) => {
  let photoHash = result.path;
  if (error) {
    console.error(error)
  }
});

When trying to get from IPFS and display:

let holderPhoto = await $.get(`https://ipfs.infura.io/ipfs/${IPFSPhotoHash}`);
    const blob = new Blob( [ holderPhoto ] );
    const url = URL.createObjectURL( blob );
    const img = document.getElementById( 'photo' );
    img.image = require(url);
    img.onload = e => URL.revokeObjectURL( url );


<CardMedia id="photo" component="img" height="420" alt="Licence Photo"/>

Error:
components sync:2 Uncaught (in promise) Error: Cannot find module ‘blob:http://localhost:3000/ff4f9e6a-7fae-4cc2-93b3-a6234719c87f’