import { LoadErrorStub } from '@yandex-lego/components/Image/__examples__/load-error-stub.tsx'
import loadErrorStubSource from '!!raw-loader!@yandex-lego/components/Image/__examples__/load-error-stub.tsx'
import { SizesAndSrcset } from '@yandex-lego/components/Image/__examples__/sizes-srcset.tsx'
import sizesAndSrcsetSource from '!!raw-loader!@yandex-lego/components/Image/__examples__/sizes-srcset.tsx'
import { WidthAndHeight } from '@yandex-lego/components/Image/__examples__/width-height.tsx'
import widthAndHeightSource from '!!raw-loader!@yandex-lego/components/Image/__examples__/width-height.tsx'

#### Задание ширины и высоты

Чтобы задать ширину, высоту и скругления изображения, используйте свойства `width`, `height` и `borderRadius`.

<Example
    component={WidthAndHeight}
    source={widthAndHeightSource}
/>

#### Заглушки при загрузке изображений

Компонент состоит из трех частей:

```html
<container>
    <img/>
    <stub/>
</container>
```

```typescript jsx
import React from 'react';
import { Image } from '@yandex-lego/components/Image/desktop';

const App: React.FC = () => {
    return (
        <Image className="my-image" stub={<MyImageStub/>} />
    );
};
```

<Example
    component={LoadErrorStub}
    source={loadErrorStubSource}
/>

#### Размер изображения в зависимости от ширины экрана

Изображение для ретины — `src2x`.
Чтобы более гибко настроить адаптивные изображения, используйте свойства `sizes` и `srcSet`.

Чтобы увидеть разницу, измените ширину окна браузера

<Example
    component={SizesAndSrcset}
    source={sizesAndSrcsetSource}
/>