для компонента, который умеет запрашивать у Api необходимое разрешение картинки под
разрешение устройства пользователя, передавая параметр imageWidth. В принципе, из комментариев понятно чего я хочу.
const deviceSizes = [300, 400, 500, 600, 700, 800, 900, 1150]; // из файла констант (настройка размеров экранов), по нему библиотека будет формировать srcset
для браузера
// это Реакт компонент
const AdaptiveImage = ({
delimiters = [1,1,1], // это будет приходить из пропсов. так я буду задавать в каком соотношении к ширине экрана будет картинка в зависимости от типа устройства
src,
width,
height,
alt,
...rest
}) => {
// например delimiters = [1, 1, 2];
// 1 - означает, что картинка будет на весь экран на мобилах
// 1 - на планшетах тоже на весь экран
// 2 - на пол-экрана будет картинка на десктопах
// этот хук получает ширину экрана в пикселях, а также тип текущего устройства
const {
width: screen, isMobile, isTablet, isDesktop,
} = useAdaptive();
const delimiter = // ??? например isDesktop = true, тогда должен быть равен 2 - согласно [1, 1, 2] (на пол-экрана картинка)
// соотношение ширины и высоты картинки, чтобы рассчитать правильно пропорции
const ratio = width / height;
// подсчитанная ширина (разрешение) изображения под размер экрана пользователя
const adaptiveWidth = deviceSizes.reduce((prev, curr) => (Math.abs(curr - screen) < Math.abs(prev - screen) ? curr : prev));
// подсчитанная необходимая высота картинки, чтобы сохранить пропорции
const adaptiveHeight = adaptiveWidth / ratio;
return (
<Image
loader={({ src: imageSrc, width: imageWidth }) => loaderImage(imageSrc, imageWidth)}
src={src}
width={adaptiveWidth}
height={adaptiveHeight}
alt={alt}
{...rest}
/>
);
};
let delimeter; if(isMobile) { delimeter = delimiters[0] }else if(isTablet){ delimeter = delimiters[1] }else if(isDesktop){ delimeter = delimiters[2] } ну вот так?
Не, по хакерски это вот так delimeters[isMobile * 1 + isTablet *2 + isDesktop * 3] работать будет, но не в коем случае так не делай.
Обсуждают сегодня