title: Selecting an image element by using the source attribute to find it
body: <p>I'm working on a script for a website, and I need to change the icon of one of its images. The problem is the image on the site only has a tag like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img src="/pic1.png" alt="clear" &gt;
  </code></pre>
  
  <p>I have tried selecting the image by using:</p>
  
  <pre class="lang-html prettyprint-override"><code>document.querySelector("img[src='pic1.png']");
  </code></pre>
  
  <p>What I have tried looks like this:</p>
  
  <pre><code>var y = document.querySelector("img[src='/pic1.png]'");
  y.innerHTML = "&lt;img src='pic2.png' alt='clear'&gt;";
  </code></pre>
  
  <p>I also tried</p>
  
  <pre><code>var y = document.querySelector("img[src='/pic1.png]'");
  y.src = "/pic2.png";
  </code></pre>
  
  <p>Is there anyway I can find the image using the <code>src</code> attribute, assign it to a variable, then replace the <code>src</code>?</p>
  
  <p>Your help is appreciated :)</p>