React - Ленивая загрузка изображений - PullRequest
Новая
       13

React - Ленивая загрузка изображений

0 голосов
/ 18 апреля 2019

У меня есть веб-сайт, использующий React и созданный с помощью Webpack. Работает нормально и сейчас пытаюсь немного его оптимизировать. Вот как я в настоящее время отрисовываю изображения, которые храню внутри app/images/files/*.png

приложение / изображения / index.js 

import image1 from './files/image1.png';
import image2 from './files/image2.png';

export default {
  image1,
  image2,
};

приложение / компоненты / Image.js 

import React from 'react';
import images from '../images';

const Image = ({ name }) => {
  const src = images[name];
  if (!src) return null;
  return (
    <img src={src} alt={name} />
  );
}

export default Image;

Затем я могу использовать компонент <Image /> на своем веб-сайте, не слишком заботясь об источниках изображений (поскольку все они перечислены в одном файле - app/images/index.js);

Как сделать так, чтобы мой Image компонент лениво загружал изображения? Или мне лучше играть с app/images/index.js, чтобы сделать это?

...