title: How to display OpenWeatherMap icons in weather application?
body: <p>I'm trying to display weather icons from OpenWeatherMap in my weather application using JavaScript.</p>
  <p>I've tried using jQuery and other solutions I've seen online. I've also tried specifying this link (&quot;http://openweathermap.org/img/w/&quot;) using the &quot;src&quot; attribute, but the link doesn't work and the image is broken as a result.</p>
  <p>How do I successfully add weather icons to my application?</p>
  <p>Here is some minimal code used to formulate this problem. I hope this helps.</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;weather&quot;&gt;
    &lt;div id=&quot;date&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;cityName&quot;&gt;&lt;/div&gt;
    &lt;img src=&quot;&quot; id=&quot;icon&quot;&gt;
    &lt;div id=&quot;temp&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;description&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>JavaScript:</p>
  <pre><code>var d = new Date();
  var n = d.toLocaleDateString();
  document.getElementById(&quot;date&quot;).innerHTML = n;
  
  function getWeather( cityID ) {
    var key = '535f8a50b4bc24608c72fcde2aecb52b';
    fetch('https://api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&amp;appid=' + key)  
    .then(function(resp) { return resp.json() }) 
    .then(function(data) {
      drawWeather(data);
    })
    .catch(function() {
      // catch any errors
    });
  }
  
  window.onload = function() {
    getWeather( 6167865 );
  }
  
  function drawWeather( d ) {
    var celcius = Math.round(parseFloat(d.main.temp)-273.15);
    var fahrenheit = Math.round(((parseFloat(d.main.temp)-273.15)*1.8)+32); 
  
    document.getElementById('cityName').innerHTML = d.name;
    document.getElementById('description').innerHTML = d.weather[0].description;
    document.getElementById('temp').innerHTML = fahrenheit + '&amp;deg;';
    document.getElementById('icon').src = &quot;http://openweathermap.org/img/w/&quot;+obj.weather[0].icon+&quot;.png&quot;;
   }
  </code></pre>