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

Question

Я предварительно загружаю свои изображения в componentDidMount следующим образом:

photos.forEach(picture => {
  const img = new Image();
  img.src = picture.url;
});

однако, когда я пытаюсь вставить мои изображения вот так (в другой компонент)

<img src={photos[0].url} ... />

itдолжен загрузить изображение снова.На моей вкладке сети у меня есть 2 идентичных запроса на одно и то же изображение с одного и того же URL

с одинаковыми заголовками (кроме времени c)

Answer 1

Вы можете включить кеширование браузером для статических ресурсов, таких как images / CSS / JS и других библиотек, таких как jQuery и т. Д., Которые не часто меняются.Попробуйте добавить заголовок ответа кеш-контроля для статических ресурсов.Это доступные значения для заголовка cache control .

Cache-Control: public 
Cache-Control: must-revalidate
Cache-Control: no-cache
Cache-Control: no-store
Cache-Control: no-transform
Cache-Control: private
Cache-Control: proxy-revalidate
Cache-Control: max-age=<seconds>
Cache-Control: s-maxage=<seconds>

Вы также можете добавить заголовок ответа expires , когда эти статические ресурсы обслуживаются.Установка значения на предыдущую дату заставит браузер не кэшировать ответ.

Expires: <http-date>

Answer 2

Это ожидаемое поведение.Зачем?когда вы делаете img.src = picture.url;Будет запрос на изображение, произойдет.в следующий раз вы снова назначаете src тегу img -> img src = {photos [0] .url}, поэтому будет запущен следующий запрос.(на этот раз должно быть из дискового кэша).

let images = photos.map (picture =>);
затем визуализируем эту переменную изображений как
ReactDOM.render (imgs, mountNode)