Laravel Blade img Fallback for User Avatars
Add image fallback patterns to Laravel Blade templates using null-coalescing, onerror attributes, and fallback.pics placeholder URLs for empty avatars and missing media.
Laravel Blade templates handle image rendering server-side, which is the right layer to resolve fallback URLs for null or empty database fields before the HTML reaches the browser.
For user avatars, product thumbnails, and CMS media fields, a combination of Blade conditionals for null checks and HTML onerror attributes for CDN failures covers the most common failure modes without requiring any JavaScript.
Server-side null check
Handle null image fields in Blade templates
The simplest fallback pattern in Laravel is a null-coalescing operator in the img src attribute. Resolve the fallback URL at render time when the model field is null or empty.
This ensures the correct src reaches the browser on first render — no JavaScript required for the null case.
{{-- resources/views/users/show.blade.php --}}
<img
src="{{ $user->avatar ?? 'https://fallback.pics/api/v1/avatar/80?text=' . strtoupper(substr($user->name, 0, 2)) }}"
alt="{{ $user->name }}"
width="80"
height="80"
onerror="this.onerror=null; this.src='https://fallback.pics/api/v1/avatar/80?text=??'"
/>Blade component
Encapsulate fallback logic in a Blade component
Repeating the fallback logic across multiple templates creates maintenance problems. A reusable Blade component centralizes the fallback URL computation and keeps individual templates clean.
Create an anonymous component in resources/views/components/ and pass the model and size as props.
{{-- resources/views/components/user-avatar.blade.php --}}
@props(['user', 'size' => 80])
@php
$initials = collect(explode(' ', $user->name))
->map(fn($word) => strtoupper(substr($word, 0, 1)))
->take(2)
->implode('');
$fallback = "https://fallback.pics/api/v1/avatar/{$size}?text={$initials}";
$src = $user->avatar ?? $fallback;
@endphp
<img
src="{{ $src }}"
alt="{{ $user->name }}"
width="{{ $size }}"
height="{{ $size }}"
onerror="this.onerror=null; this.src='{{ $fallback }}'"
/>
{{-- Usage --}}
<x-user-avatar :user="$user" :size="64" />Product images
Product image fallbacks for catalog views
Product catalogs are the other common fallback case. A product record may have no image attached — especially for newly imported SKUs or draft products.
Use the product name in the fallback URL text parameter so the placeholder shows something more informative than a blank square with dimensions.
@php
$imgSrc = $product->image_url
?? 'https://fallback.pics/api/v1/400x400?text=' . urlencode($product->name);
@endphp
<img
src="{{ $imgSrc }}"
alt="{{ $product->name }}"
width="400"
height="400"
onerror="this.onerror=null; this.src='https://fallback.pics/api/v1/400x400?text=No+Image'"
loading="lazy"
/>Eloquent accessor
Add an image_url accessor to Eloquent models
Centralizing the fallback logic in an Eloquent model accessor keeps Blade templates clean and makes the fallback URL available everywhere the model is used — API responses, queue jobs, and notification templates.
Accessors in Laravel 9+ use the Attribute::make pattern. For older versions, use getImageUrlAttribute().
// app/Models/Product.php
use IlluminateDatabaseEloquentCastsAttribute;
protected function imageUrl(): Attribute
{
return Attribute::make(
get: function () {
if ($this->image) return $this->image;
return 'https://fallback.pics/api/v1/400x400?text=' . urlencode($this->name);
}
);
}Storage fallback
Handle Laravel Storage URLs that return 403 or 404
Laravel's Storage::url() can return paths that are not publicly accessible — for example, files on a private S3 disk. The generated URL returns a 403, triggering the browser's onerror event.
Check whether the file exists before generating the URL. For large catalogs, avoid per-request existence checks; instead, use a background job to audit and flag missing files.
$imageUrl = $product->image && Storage::disk('public')->exists($product->image)
? Storage::url($product->image)
: 'https://fallback.pics/api/v1/400x400?text=' . urlencode($product->name);Social meta
Set og:image fallbacks in Laravel layouts
Laravel apps with blog or product pages need og:image tags in the HTML head. Resolve the fallback in the controller and pass it to the view as a variable.
{{-- In a Blade layout --}}
<meta property="og:image" content="{{ $ogImage ?? 'https://fallback.pics/api/v1/1200x630?text=Default' }}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />Key takeaways
What to standardize before shipping
- Resolve null image fields with null-coalescing in Blade src attributes for zero-JS fallback on first render.
- Encapsulate avatar fallback logic in a reusable Blade component to avoid repeating URL construction.
- Add an image_url accessor to Eloquent models so the fallback URL is available everywhere the model is used.
- Use PHP's urlencode() when embedding product names in fallback.pics text parameters.
- Add an onerror attribute for CDN failures that occur after render, guarded with this.onerror=null.
Production fallback layer
Use fallback.pics anywhere an image URL is accepted.
Start with one deterministic URL and standardize fallback behavior across your design system.
Continue reading
Related articles
How to Fix Broken Images in HTML with onerror
Use the HTML img onerror fallback pattern to replace broken images with stable fallback.pics URLs while preserving layout, alt text, and production safety.
Placeholder Images for CMS Previews and Missing Media Fields
Use placeholder images for CMS previews, empty media fields, draft content, editorial cards, and broken remote assets without blocking publication.
PHP img onerror Fallback Pattern (No Framework)
Add reliable image fallbacks in plain PHP using server-side null checks, HTML onerror attributes, and fallback.pics placeholder URLs without any framework dependency.