Блог

Главная - Вопросы по программированию - Компонент изображения Nextjs медленно загружается на карту

Компонент изображения Nextjs медленно загружается на карту

#javascript #reactjs #typescript #optimization #next.js

Вопрос:

Когда я использую карту, изображения медленно отображаются на локальном хосте. Однако, когда я не использую карту, она быстро загружается.

Я использовал различные реквизиты из компонента изображения, но, похоже, ни один из них не исправил эту проблему.

Однако после того, как все изображения отрисованы и я нажал кнопку обновить, они быстро загружаются.

Это довольно запутанно. Есть ли какой-либо способ быстро загрузить изображения при первом посещении страницы?

  import React from 'react'; import Image from 'next/image'; import styles from './Peoples.module.scss'; export const Peoples = () =gt; (  lt;gt;  {[...Array(10)].map((x, i) =gt; (  lt;div className={styles.team_img_container} key={i}gt;  lt;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}  /gt;  lt;/divgt;  ))}  lt;/gt; );  export default Peoples;

Комментарии:

1. Вы пробовали обычный for цикл или while цикл вместо Array.map() этого ?

2. @Edper Я только что попробовал это с помощью цикла for, перейдя к массиву и отрисовав массив с возвращением lt;divgt;{массив}lt;divgt;lt;/divgt;

3. ОК. Но почему именно массив? Когда кажется, что вам это просто нужно в качестве инкрементного индекса? Таким образом, цикл for или while без массива был бы в порядке. Если только у вас нет какой-то части вашего кода, которую вы не показали. Но, честно говоря, я не думаю, что это что-то изменит. Вероятно, проблема может заключаться в размере вашего изображения. С 10 из них это, очевидно, замедлит загрузку этих изображений.

4. Мне нужен массив, потому что я не могу найти способ визуализации без сопоставления. Кроме того, да, я собираюсь протестировать уменьшение размера изображения и оптимизацию. У меня есть куча изображений, которые должны быть маленькими. Есть ли у вас какие-либо рекомендации для этого? спасибо @Edper !

Метки: