I want to create a small weather api, for that I am using the page weatherapi.com, I can get the name of the city and the temperature but the url of the image I cannot add it to the src of the element of Next.js. This is the component i am creating:

import React from 'react'
import Image from 'next/image'
import styles from '../../../styles/Home.module.css'
import tpo from '../../../public/weather/64x64/day/113.png'

class Meteorologia extends React.Component{
   constructor(props){
     super(props);
     this.state = {ciudad: "",icon: "",grdos: ""};
   }

   cargarDatos = ()=>{
     const apikey = "codigo de la api de weatherapi.com";
     let ciudad = "Santiago";
     let ruta = `https://api.weatherapi.com/v1/current.json?key=${apikey}&q=${ciudad}&aqi=no`;

     fetch(ruta).then(response => response.json()).then(datos =>{
       const {location,current} = datos;
       const icono = "https:"+current.condition.icon;
       this.setState({ciudad: location.name,icon: icono,grdos: current.temp_c+"°"});
     });
   }

   render(){ 
     return(
       <div className={styles.contM} onLoad={this.cargarDatos}> 
            <p className={styles.nomCdd}>{this.state.ciudad}</p>
            <p className={styles.gradosT}>{this.state.grdos}</p>
            <Image className={styles.imag} id="imaT" src={this.state.icon} alt="image temp"/>
       </div>
     );
   }
}
export default Meteorologia;

I can use the name of the city and the temperature but not the url of the image. This is the error that is generated: Error: Image is missing required "src" property. Make sure you pass "src" in props to the next/image component. Received: {}