previewUrl

Свойство previewUrl доступно для объектов загруженных файлов в компонентах Livewire, использующих трейт WithFileUploads. Оно возвращает временный URL-адрес, по которому можно получить доступ к содержимому файла для отображения в браузере. Это свойство доступно только для чтения и существует до тех пор, пока файл находится во временном хранилище.

Синтаксис

@if ($image)
	<img src="{{ $image->previewUrl }}" alt="Preview">
@endif

Пример

Давайте создадим компонент для загрузки изображения и отображения его превью с помощью previewUrl:

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;

class ImageUploader extends Component
{
	use WithFileUploads;

	public $image = null;

	public function render()
	{
		return view('livewire.image-uploader');
	}
}

<div>
	<form wire:submit.prevent="save">
		<input type="file" wire:model="image">

		@if ($image)
			<div>
				<p>Preview:</p>
				<img src="{{ $image->previewUrl }}" alt="Preview">
			</div>
		@endif

		<button type="submit">Upload</button>
	</form>
</div>

Результат выполнения кода:

<div>
	<form>
		<input type="file">
		<div>
			<p>Preview:</p>
			<img src="/livewire/preview/abcd1234" alt="Preview">
		</div>
		<button type="submit">Upload</button>
	</form>
</div>

Пример

Вы можете использовать previewUrl для отображения превью нескольких изображений:

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;

class MultipleImages extends Component
{
	use WithFileUploads;

	public $images = [];

	public function render()
	{
		return view('livewire.multiple-images');
	}
}

<div>
	<input type="file" wire:model="images" multiple>

	@if ($images)
		<div>
			@foreach ($images as $image)
				<img src="{{ $image->previewUrl }}" alt="Preview">
			@endforeach
		</div>
	@endif
</div>

Результат выполнения кода:

<div>
	<input type="file" multiple>
	<div>
		<img src="/livewire/preview/efgh5678" alt="Preview">
		<img src="/livewire/preview/ijkl9012" alt="Preview">
		<img src="/livewire/preview/mnop3456" alt="Preview">
	</div>
</div>

Смотрите также

трейт WithFileUploads,
который добавляет функциональность загрузки файлов
метод store,
который сохраняет загруженный файл
свойство tmp-upload,
которое управляет временными загрузками
правило валидации image,
которое проверяет, что файл является изображением