> For the complete documentation index, see [llms.txt](https://overfinch.gitbook.io/cheatsheet/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://overfinch.gitbook.io/cheatsheet/laravel/vite-sborka-izobrazhenii.md).

# Vite сборка изображений

Устанавливаем все зависимости которые изначально прописаны в package.json

```bash
npm install
```

Что бы использовать сборку ассетов через Vite в laravel 9 Можно создать папку images по пути resources/images и в неё складывать изображения, в resources/js/app.js дописать глобальный импорт этой папки

```javascript
import.meta.glob([
    '../images/**',
    '../fonts/**',
])
```

после команды `npm run build` эти изображения сбилдятся в папку public/build/assets и будут доступны так...

{% code title="в html blade файлах" %}

```html
<img src="{{Vite::asset('resources/images/bg-1.png')}}" alt="">
```

{% endcode %}

{% code title="в css файлах" %}

```css
background-image: url('../images/bg-1.png');
```

{% endcode %}