title: Read static / public image blob of my website
body: <p>TL;DR: On my website, I have a file name of a static file, and I need a <code>Blob</code> or byte array.</p>
  <p>I assume it's been asked before as it's pretty basic, but I've spent 2 hours on this already and all the questions involve an <code>&lt;input&gt;</code> element / events / DOM elements, and I just want to read files I have already as the site is built.</p>
  <hr />
  <p>I'm trying to quickly make a local website with a few images and a button, that should fire an API call when pressed, with the images attached to it.</p>
  <p>The site is built using the most basic <code>express</code> app I could find. I simply ran <code>npx express-generator --no-view</code> to get the simplest HTML template. For all intent's and purposes, everything happens in one file - <code>index.html</code>.</p>
  <p>I want the files converted to byte streams, blobs, or anything that I could work with. Now, I have images inside <code>public</code> folder of the app. Assuming I know the filenames and can access them in <code>index.html / &lt;script&gt;</code>, how can I go from a filename to a <code>Blob</code>, byte string or anything like that?</p>
  <p>Illustration in code:</p>
  <pre class="lang-js prettyprint-override"><code>img1_fname = &quot;/images/img1.png&quot;
  img2_fname = &quot;/images/img2.png&quot;
  ...
  imgN_fname = &quot;/images/imgN.png&quot;
  
  // Question
  img1_bytes = ???
  img2_bytes = ???
  ...
  imgN_bytes = ???
  
  var formData = new FormData();
  formData.append(img1_fname, img1_bytes);
  formData.append(img2_fname, img2_bytes);
  ...
  formData.append(imgN_fname, imgN_bytes);
  
  var request = new XMLHttpRequest();
  request.open(&quot;POST&quot;, URL);
  request.send(formData);
  </code></pre>