title: Prevent JSF encoding of & as &amp; in image url
body: <p>I'm getting an image url from my database and need to display it in an <code>&lt;img&gt;</code> tag. The problem I have is that JSF is encoding <code>&amp;</code>'s as <code>&amp;amp;</code> and the image url is not found. </p>
  
  <p>Here's an example. The correct image url: </p>
  
  <pre><code>https://&lt;server details&gt;?ahid=2096&amp;aid=107687&amp;lid=28812968&amp;url=202.jpg
  </code></pre>
  
  <p>The encoded url: </p>
  
  <pre><code>https://&lt;server details&gt;?ahid=2096&amp;amp;aid=107687&amp;amp;lid=28812968&amp;amp;url=202.jpg
  </code></pre>
  
  <p>In this case the encoded image url is not found and displays the broken image icon. How do I solve this?</p>
  
  <p>EDIT: the <code>html</code> elements with their <code>JSF</code> tags:</p>
  
  <pre><code>&lt;a href='#{product.itemUrl}' target="_blank"&gt; 
      &lt;img src='#{searchResults.getThumbnailUrl(product)}' class="img-responsive imageproduct" /&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>EDIT 2: </p>
  
  <p>I thought I'd try replacing the <code>&amp;amp;</code> back to <code>&amp;</code> with <code>javascript</code> but this doesn't work either because in the <code>javascript</code> the image url is fine, while in the browser's view source it's not. Here's the code. In the browser: </p>
  
  <pre><code>&lt;img id="thumbnailId" onmouseover="decodeUrl(this)" src="https://www.proxibid.com/asp/LotImageViewer.asp?ahid=3231&amp;amp;aid=108183&amp;amp;lid=28955872&amp;amp;url=144-1.jpg" /&gt;
  </code></pre>
  
  <p>The javascript: </p>
  
  <pre><code>function decodeUrl(img) {
      var url = img.src;
      console.log("url before = " + url);
      url = replaceAll(url, "&amp;amp;", "&amp;");
      console.log("url after = " + url);
  }
  
  function replaceAll(str, find, replace) {
      return str.replace(new RegExp(find, 'g'), replace);
  }
  </code></pre>
  
  <p>The output is </p>
  
  <pre><code>url before = https://www.proxibid.com/asp/LotImageViewer.asp?ahid=3231&amp;aid=108183&amp;lid=28955872&amp;url=144-1.jpg
  url after =  https://www.proxibid.com/asp/LotImageViewer.asp?ahid=3231&amp;aid=108183&amp;lid=28955872&amp;url=144-1.jpg
  </code></pre>
  
  <p>as you can see the two are identical, and correct. But doing a view source results in</p>
  
  <pre><code>src="https://www.proxibid.com/asp/LotImageViewer.asp?ahid=3231&amp;amp;aid=108183&amp;amp;lid=28955872&amp;amp;url=144-1.jpg"
  </code></pre>
  
  <p>which is incorrect, and the image is broken. Any idea how to fix this? </p>