title: Changing image source results in empty image
body: <p>I just figured out how to change an image's source with javascript and now it keeps setting the element to a blank image as if it can't find the file path even though when I control click on the path in visual studio it shows me the right image. Here's my code to change the image source:</p>
  
  <pre><code>setTimeout(function(){userImg.setAttribute('src', "‪file:///C:/Users/My%20Name/Desktop/websites/rockpaperscissors/images/paper.png")}, 300);
  </code></pre>
  
  <hr>
  
  <p>Running snippet </p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setTimeout(function() {
    userImg.setAttribute('src', "‪https://www.pinclipart.com/picdir/middle/327-3278638_note-clipart-blank-paper-png-download.png")
  }, 300);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;title&gt;
    Rock Paper Scissors Game
  &lt;/title&gt;
  &lt;header&gt;
    &lt;h1&gt;Rock Paper Scissors&lt;/h1&gt;
  &lt;/header&gt;
  &lt;div class="score-board"&gt;
    &lt;div id="user-label" class="badge"&gt;user&lt;/div&gt;
    &lt;div id="computer-label" class="badge"&gt;comp&lt;/div&gt;
    &lt;span id="user-score"&gt;0&lt;/span&gt;:&lt;span id="computer-score"&gt;0&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="result"&gt;
    &lt;p&gt;Make Your Move!&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="choices"&gt;
    &lt;div class="choice" id="r"&gt;
      &lt;img src="images/rock.png" width="115" height="95"&gt;
    &lt;/div&gt;
    &lt;div class="choice" id="p"&gt;
      &lt;img src="images/paper.png" width="120" height="120"&gt;
    &lt;/div&gt;
    &lt;div class="choice" id="s"&gt;
      &lt;img src="images/scissors.png" width="130" height="110"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="fighters"&gt;
    &lt;div class="fighter" id="u"&gt;
      &lt;img id="userimg" src="images/rock.png" width="370" height="300"&gt;
    &lt;/div&gt;
    &lt;div class="fighter" id="c"&gt;
      &lt;img id="compimg" src="images/rockflipped.png" width="370" height="300"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="squares"&gt;
    &lt;div class="square" id="userSquare"&gt;&lt;/div&gt;
    &lt;div class="square" id="computerSquare"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="app.js" charset="utf-8"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>