Issues with EXIF Library in HTML

I have the code below, and no matter what I try I literally cannot get the exif data to show up I have no clue what is going on. This code is taken straight from the github of the exif-js library: https://github.com/exif-js/exif-js

window.onload = getExif;

function getExif() {
  var img1 = document.getElementById("img1");
  EXIF.getData(img1, function() {
    var make = EXIF.getTag(this, "Make");
    var model = EXIF.getTag(this, "Model");
    var makeAndModel = document.getElementById("makeAndModel");
    makeAndModel.innerHTML = `${make} ${model}`;
  });
}

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<img src="https://2.img-dpreview.com/files/p/TS1200x900~sample_galleries/0861943200/2984823081.jpg" id="img1" style="max-width: 200px;" />
<pre>Make and model: <span id="makeAndModel"></span></pre>
<br/>
<pre id="allMetaDataSpan"></pre>
<br/>

When I open my HTML file in chrome (not been published yet so opening directly from my computer) it just shows this:

I tried every single solution available on the internet but code that works for others won't work for me (ex. https://awik.io/extract-gps-location-exif-data-photos-using-javascript/)

The code works, but only if the server the image is from the same origin as your script OR that the image server supports CORS

Here is a working version from my server with the image from the same origin

https://plungjan.name/SO/exif/

window.addEventListener("DOMContentLoaded", () => {
  const getExif = (id) => {
    let img1 = document.getElementById(id);
    EXIF.getData(img1, function() {
      console.log("EXIF running"); // 
      var make = EXIF.getTag(this, "Make");
      var model = EXIF.getTag(this, "Model");
      makeAndModel.innerHTML = `${make} ${model}`;
    });
  };
  const makeAndModel = document.getElementById("makeAndModel");
  getExif("img1")
});