title: I am trying to show the images on my local server to the web browser but it doesn't work
body: <p>This is my JSON file:myjson.json</p>
  <pre><code>{
      &quot;events&quot; : [
          { &quot;location&quot; : &quot;San Francisco, CA&quot;, &quot;date&quot; : &quot;May 1&quot;, &quot;map&quot; :&quot;JSON/num1.jpg&quot;},
          { &quot;location&quot; : &quot;Austin , TX&quot;, &quot;date&quot; : &quot;May 15&quot;, &quot;map&quot; :&quot;JSON/num2.jpg&quot;},
          { &quot;location&quot; : &quot;New York , NY&quot;, &quot;date&quot; : &quot;May 30&quot;, &quot;map&quot; :&quot;JSON/num3.jpg&quot;}
      ]
  }
  </code></pre>
  <p>Here is my main file:P1.html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;body&gt;
      &lt;h2&gt;JSON User Account Example&lt;/h2&gt;
  
      &lt;script&gt;
          var xhr = new XMLHttpRequest();
  
          xhr.onload = function () {
              console.log(&quot;xhr.status: &quot; + xhr.status);
              if (xhr.status === 200) {
                  responseObj = JSON.parse(xhr.responseText);
                  var newContent = '';
                  var i;
                  for (i = 0; i &lt; responseObj.events.length; i++) {
                      newContent += '&lt;div class=&quot;event&quot;&gt;';
                      newContent += '&lt;img src=&quot;' + responseObj.events[i].map + '&quot;';
                      newContent += 'alt=&quot;' + responseObj.events[i].location + '&quot; /&gt;';
                      newContent += '&lt;p&gt;&lt;b&gt;' + responseObj.events[i].location + '&lt;/b&gt;&lt;br&gt;';
                      newContent += responseObj.events[i].date + '&lt;/p&gt;';
                      newContent += '&lt;/div&gt;';
                  }
                  document.getElementById(&quot;myuser&quot;).innerHTML = newContent;
              }
          };
  
          xhr.open(&quot;GET&quot;, &quot;JSON/myjson.json&quot;, true);
          xhr.send(null);
      &lt;/script&gt;
      &lt;div id=&quot;myuser&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>When I run the code the only thing that show is the title other than that, nothing. I can't figure it out. The JSON file is located in the same folder as the html file. I don't understand why it doesn't show on the web browser.</p>
  <p>I changed the folder name to JSON to make it simpler and applied all those changes everyone pointed out. All the files are in the same folder and server and still, it does not load the images. frustrated.</p>
  <p>So I just checked the developer tool in the browser and this is what I got:</p>
  <p>Access to XMLHttpRequest at 'file:///C:/Users/OneDrive/Desktop/Stack/2021/JSON/myjson.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, chrome-untrusted, https.</p>