Quiero crear una pequeña api de tiempo, para eso estoy usando la página weatherapi.com, puedo obtener el nombre de la ciudad y la temperatura pero la url de la imagen no la puedo agregar al src del elemento de Next. js. Este es el componente que estoy creando:

 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;

Puedo usar el nombre de la ciudad y la temperatura pero no la url de la imagen. Este es el error que se genera: Error: Falta la propiedad "src" requerida en la imagen. Asegúrese de pasar "src" en props al componente next/image . Recibió: {}