Cuando uso el mapa , las imágenes se vuelven lentas en localhost. Sin embargo, cuando no uso el mapa, se carga rápidamente.
Usé una variedad de accesorios del componente Imagen, pero ninguno parece solucionar este problema.
Sin embargo, después de renderizar todas las imágenes y presionar el botón Actualizar, se cargan rápidamente.
Esto es bastante confuso. ¿Hay alguna forma de cargar imágenes rápidamente al visitar la primera página?
import React from 'react'; import Image from 'next/image'; import styles from './Peoples.module.scss'; export const Peoples = () => ( <> {[...Array(10)].map((x, i) => ( <div className={styles.team_img_container} key={i}> <Image style={{ height: 100, width: 100 }} src={`/people/${i + 1}.webp`} alt="Picture of the author" width={100} height={100} // unoptimized={true} // loading="eager" priority={true} // quality={70} /> </div> ))} </> ); export default Peoples;Así que implementé esto y lo dejé como está. Parece que durante el modo de desarrollo, todos los png o jpg se convertirán a webp, por lo tanto, la recarga es lenta. Así que impleméntelo y verifique su rendimiento en Vercel, simplemente no use webp porque el próximo lo convertirá 2 .