rendering-media.md

title	weight
Rendering media	5

If your $media instance concerns an image, you can render it directly in a Blade view.

Here is the original image: {{ $media }}

This will output an img tag with a src attribute that contains an url to the media.

You can also render an img to a conversion.

Here is the converted image: {{ $media->conversion('thumb') }}

You can also use this shorthand:

Here is the converted image: {{ $media('thumb') }}

You can add extra attributes by calling attributes.

Here is the image with some attributes: {{ $media->img()->attributes(['class' => 'my-class']) }}

If you want defer loading offscreen images you can use the lazy function.

Lazy loading this one: {{ $media()->lazy() }}

Customizing the views

You can customize the rendered output even further by publishing the views with:

php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="views"

The following files will be published in the resources/views/vendor/media-library directory:

• image.blade.php: will be used to render media without responsive images
• responsiveImage.blade.php: will be used to render media with responsive images without a tiny placeholder
• responsiveImageWithPlaceholder.blade.php: will be used to render media with responsive images including a tiny placeholder.

You may modify these published views to your heart's content.