Привет! В этом сообщении блога мы рассмотрим различные методы простого отображения изображений в Laravel 10 с помощью Vite, быстрого и эффективного инструмента сборки для фронтенд-разработки. Итак, давайте приступим к делу и откроем для себя несколько интересных приемов!

Метод 1: использование тега HTML <img>
Самый простой способ отобразить изображение в Laravel 10 — использовать тег HTML <img>. Вот пример:

<img src="{{ asset('images/image.jpg') }}" alt="Image">

В этом фрагменте кода мы используем вспомогательную функцию asset()для создания правильного URL-адреса изображения. Обязательно замените 'images/image.jpg'фактическим путем к файлу изображения.

Метод 2: использование системы хранения Laravel
Laravel предоставляет мощную систему хранения, которая позволяет легко хранить и извлекать файлы. Вот как можно отобразить изображение, хранящееся в каталоге хранилища Laravel:

<img src="{{ Storage::url('images/image.jpg') }}" alt="Image">

Этот код предполагает, что вы уже сохранили изображение в каталоге storage/app/public/images. Не забудьте запустить команду php artisan storage:link, чтобы создать символическую ссылку на каталог public/storage.

Метод 3: использование управления ресурсами Vite.
Vite — фантастический инструмент для управления ресурсами внешнего интерфейса в Laravel 10. Чтобы использовать Vite для отображения изображений, выполните следующие действия:

Шаг 1. Установите Vite с помощью npm или Yarn:

npm install vite

Шаг 2. Настройте Vite в своем проекте Laravel. Создайте файл vite.config.jsв корневом каталоге и добавьте следующий код:

module.exports = {
  publicDir: 'public',
  build: {
    assetsDir: 'assets',
    manifest: true,
  },
};

Шаг 3. Поместите изображения в каталог resources/assets.

Шаг 4. В шаблоне Blade используйте манифест ресурса Vite для отображения изображения:

<img src="{{ mix('/assets/images/image.jpg') }}" alt="Image">

Обязательно запустите сервер разработки Vite, используя npm run devили yarn dev, чтобы изменения вступили в силу.

Вот и все! Вы узнали три разных метода отображения изображений в Laravel 10 с помощью Vite. Выберите тот, который соответствует требованиям вашего проекта, и начните с легкостью демонстрировать свои изображения.

Удачного программирования!