How to set image via innerHTML [duplicate]

Question

Confusing question...

In echo i have blank page.. if i set innerHTML="some text"; - it works. Why it's not working with image? If i directly goes to https://domain.com/adv/banner.jpg it will open image...

echo'
  <div id="yabanner"></div>

  <script>
  yaGetBanner();
  function yaGetBanner()
  {
    var el = document.getElementById("yabanner");
    el.innerHTML="<img src=\'https://domain.com/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";
  }
  </script>
  ';

Answer 1

You need double quotes for the img attribute too, and then you need the backslashes. So your code would look like:

echo '
<div id="yabanner"></div>

<script>
yaGetBanner();
function yaGetBanner()
{
   var el = document.getElementById("yabanner");
   el.innerHTML="<img src=\"http://placehold.it/350x350\" width=\"400px\" height=\"150px\">";
}
</script>';

Also note that you have banner and adv in the name of your image URL. Adblockers will block these images or add inline styling to your img attributes containing that image.

I hope this help!