Skip to main content
1 de 2
Diego Avila
  • 5.5k
  • 6
  • 21
  • 48

Saludos podrias hacer algo asi:

var ruta_diaSoleado = "https://previews.123rf.com/images/grkistock/grkistock1401/grkistock140100112/25272390-d%C3%ADa-soleado-en-la-pradera-ilustraci%C3%B3n-del-vector-.jpg";
var ruta_diaLluvia ="https://previews.123rf.com/images/mccjeff/mccjeff1711/mccjeff171100047/89866275-triste-d%C3%ADa-lluvioso.jpg";
var ruta_diaNublado = "http://www.clubcientificobezmiliana.org/blog/wp-content/uploads/2012/02/IMG_13400.jpg";
var temperatura = 10;
var temperatura2 = 20;
imagen = document.getElementById('imagen_temperatura');
if(temperatura == 10){
 imagen.setAttribute('src',ruta_diaSoleado);
}
var delayInMilliseconds = 2000; //retraso de 2 segundos
setTimeout(function() {
  if(temperatura2==20){
  imagen.setAttribute('src',ruta_diaLluvia);
  }
}, delayInMilliseconds);
<img src="" alt="TEMPERATURA" id="imagen_temperatura" width="100" heigth="100">

Si te fijas tengo declarado previamente las rutas de las imagenes a usar para los distintos climas o tiempos, mediante un if valido la temperatura en este caso es algo basico pero deberias validar si entre en cierto rango de temperatura muestras la ruta de una image u otra, para ello uso setAttribute que reemplaza o establece ese atributo a la imagen mediante JavaScript, espero te sirva.

Tambien he usado un setTimeout que establece o define un retraso para que se pueda notar el cambio en las imagenes eso es opcional en tu logica..suerte..!!

Documentacion setAttribute JavaScript

Diego Avila
  • 5.5k
  • 6
  • 21
  • 48