Level 1
try
if the images folder in the public folder
$logo = base_path('public/images').'/'.'logo.png';
<img src="{!!$logo!!}" style="width: 100px; height: 100px">
Jul 14, 2023
1
Level 1
When my application generate pdf, it is showing brocken images for the logo. How can i solve this?
here is my view called pdf.blade.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Card Replacement Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 24px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border: 6px solid #000080;
}
.header {
background-color: #000080;
position: fixed;
left: 0;
right: 0;
color: white;
text-align: start;
margin-top: 10px; /* Add desired value for top margin */
margin-bottom: 10px; /* Add desired value for bottom margin */
padding-left: 30px;
font-weight: 500;
}
.text-sm {
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
}
h1 {
font-size: 24px;
font-weight: 400;
margin-bottom: 16px;
}
h2 {
font-size: 24px;
font-weight: 400;
margin-top: 16px;
}
p {
font-size: 16px;
margin: 8px 0;
}
.grid0 {
text-align: center;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 30px;
gap: 50px;
margin-bottom: 16px;
}
.grid1 {
display: grid;
grid-template-columns: 2fr 2fr;
margin-top: 30px;
gap: 50px;
margin-bottom: 20px;
}
.text-lg {
font-size: 18px;
font-weight: 400px;
}
.footer {
margin-top: 72px;
display: flex;
justify-content: space-between;
}
.text-sm-small {
font-size: 14px;
}
.grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 30px;
gap: 50px;
margin-bottom: 20px;
font-size: 20px;
font-weight: 500px;
}
</style>
</head>
<body>
<div class="container">
<div style="text-align: center;">
<img src="{{ public_path('images/logo.png') }}" style="width: 100px; height: 100px">
</div>
<div class="grid0">
<h1>Card Replacement Form</h1>
</div>
<div>
<span class="text-sm">Metbank Branch:</span>
<span class="text-sm">{{ $cardReplacement->collectionPoint }}</span>
</div>
<div>
<span class="header">Card Type</span>
</div>
<div class="grid">
<div>
<span class="text-sm">Card Type:</span>
<span class="text-sm">{{ $cardReplacement->cardType }}</span>
</div>
</div>
<div>
<span class="header">Customer Details</span>
</div>
<div class="grid1">
<div>
<span class="text-sm">Name:</span>
<span class="text-sm">{{ $cardReplacement->Name }}</span>
</div>
<div>
<span class="text-sm">Account Number:</span>
<span class="text-sm">{{ $cardReplacement->accountNumber }}</span>
</div>
<div>
<span class="text-sm">Mobile Number:</span>
<span class="text-sm">{{ $cardReplacement->mobileNumber }}</span>
</div>
<div>
<span class="text-sm">Card Number issued:</span>
<span class="text-sm">_________________________</span>
</div>
</div>
<div>
<span class="header">Other Details</span>
</div>
<div class="grid2">
<div style="position: relative; overflow-x: auto;">
<table style="width: 100%; font-size: 0.875rem; text-align: left; color: #718096; background-color: #F7FAFC;">
<thead style="font-size: 0.75rem; color: #4A5568; text-transform: uppercase; background-color: #EDF2F7;">
<tr>
<th scope="col" style="padding: 0.75rem 1.5rem;">
</th>
<th scope="col" style="padding: 0.75rem 1.5rem;">
Name
</th>
<th scope="col" style="padding: 0.75rem 1.5rem;">
Signature
</th>
<th scope="col" style="padding: 0.75rem 1.5rem;">
Date
</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #FFFFFF; border-bottom: 1px solid #CBD5E0;">
<th scope="row" style="padding: 1rem 1.5rem; font-weight: 500; color: #1A202C; white-space: nowrap;">
Downloaded by
</th>
<td style="padding: 1rem 1.5rem;">
__________________
</td>
<td style="padding: 1rem 1.5rem;">
________________
</td>
<td style="padding: 1rem 1.5rem;">
________________
</td>
</tr>
<tr style="background-color: #FFFFFF; border-bottom: 1px solid #CBD5E0;">
<th scope="row" style="padding: 1rem 1.5rem; font-weight: 500; color: #1A202C; white-space: nowrap;">
Processed by
</th>
<td style="padding: 1rem 1.5rem;">
__________________
</td>
<td style="padding: 1rem 1.5rem;">
________________
</td>
<td style="padding: 1rem 1.5rem;">
________________
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<th scope="row" style="padding: 1rem 1.5rem; font-weight: 500; color: #1A202C; white-space: nowrap;">
Approved by
</th>
<td style="padding: 1rem 1.5rem;">
__________________
</td>
<td style="padding: 1rem 1.5rem;">
________________
</td>
<td style="padding: 1rem 1.5rem;">
________________
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Here is my controller
namespace App\Http\Controllers;
use App\Models\CardReplacement;
use App\Models\Log;
use App\Http\Requests\StoreCardReplacementRequest;
use App\Http\Requests\UpdateCardReplacementRequest;
use App\Tables\CardReplacements;
use Dompdf\Dompdf;
use PDF;
use Illuminate\Http\Request;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\Response;
use Illuminate\Support\Facades\View;
use ProtoneMedia\Splade\Facades\Toast;
use Spatie\QueryBuilder\AllowedFilter;
use Spatie\QueryBuilder\QueryBuilder;
use Carbon\Carbon;
class CardReplacementController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index(Request $request)
{
$dateFilter = AllowedFilter::callback('date', function (
$query,
$value
) {
$now = Carbon::now();
if ($value === 'today') {
$query->whereDate('created_at', $now->toDateString());
} elseif ($value === 'this_week') {
$query->whereBetween('created_at', [
$now->startOfWeek()->toDateTimeString(),
$now->endOfWeek()->toDateTimeString(),
]);
} elseif ($value === 'this_month') {
$query->whereBetween('created_at', [
$now->startOfMonth()->toDateTimeString(),
$now->endOfMonth()->toDateTimeString(),
]);
}
});
$globalSearch = AllowedFilter::callback('global', function (
$query,
$value
) {
$query->where(function ($query) use ($value) {
Collection::wrap($value)->each(function ($value) use ($query) {
$query
->orWhere('cardType', 'LIKE', "%{$value}%")
->orWhere('accountNumber', 'LIKE', "%{$value}%")
->orWhere('collectionPoint', 'LIKE', "%{$value}%")
->orWhere('mobileNumber', 'LIKE', "%{$value}%");
});
});
});
$cardReplacements = QueryBuilder::for(CardReplacement::class)
->defaultSort('cardType')
->allowedFilters([
'cardType',
'accountNumber',
'reason',
'collectionPoint',
'mobileNumber',
'Name',
'status',
$globalSearch,
$dateFilter,
])
->allowedSorts([
'id',
'cardType',
'accountNumber',
'reason',
'collectionPoint',
'Name',
'mobileNumber',
])
->paginate(6)
->withQueryString();
return view('cardReplacements.index', [
'cardReplacements' => CardReplacements::class,
]);
}
/**
* Show the form for creating a new resource.
*/
public function create()
{
return view('cardReplacements.create');
}
/**
* Store a newly created resource in storage.
*/
public function store(StoreCardReplacementRequest $request)
{
CardReplacement::create($request->validated());
Log::create([
'card_replacement_id' => CardReplacement::latest()->first()->id,
'action' => 'created',
]);
Toast::title('Card Replacement Created')
->message('Created Successfully')
->success()
->leftTop()
->backdrop()
->autoDismiss(5);
return redirect()->route('card-replacements.index');
}
/**
* Display the specified resource.
*/
public function show(CardReplacement $cardReplacement)
{
return view('card-replacements.show', [
'cardReplacement' => $cardReplacement,
]);
}
/**
* Show the form for editing the specified resource.
*/
public function edit(CardReplacement $cardReplacement)
{
return view('cardReplacements.edit', [
'cardReplacement' => $cardReplacement,
]);
}
/**
* Update the specified resource in storage.
*/
public function update(
UpdateCardReplacementRequest $request,
CardReplacement $cardReplacement
) {
$cardReplacement->update($request->validated());
Log::create([
'card_replacement_id' => $cardReplacement->id,
'action' => 'updated',
]);
Toast::title('Card Replacement Updated')
->message('Updated Successfully')
->info()
->leftTop()
->backdrop()
->autoDismiss(5);
return redirect()->route('card-replacements.index');
}
/**
* Remove the specified resource from storage.
*/
public function destroy(CardReplacement $cardReplacement)
{
$cardReplacement->delete();
Log::create([
'card_replacement_id' => $cardReplacement->id,
'action' => 'deleted',
]);
Toast::title('Card Replacement deleted')
->message('Deleted successfully')
->warning()
->leftTop()
->backdrop()
->autoDismiss(5);
return redirect()->route('card-replacements.index');
}
public function downloadPdf(CardReplacement $cardReplacement)
{
$pdf = new Dompdf();
$view = View::make(
'cardReplacements.pdf',
compact('cardReplacement')
)->render();
$pdf->loadHtml($view);
$pdf->render();
return Response::stream(
function () use ($pdf) {
echo $pdf->output();
},
200,
[
'Content-Type' => 'application/pdf',
'Content-Disposition' =>
'attachment; filename="card-replacement.pdf"',
]
);
}
}
Here are my routes
<?php
use App\Http\Controllers\CardReplacementController;
use App\Http\Controllers\LoanApplicationController;
use App\Http\Controllers\LogController;
use App\Http\Controllers\PermissionController;
use App\Http\Controllers\RoleController;
use App\Http\Controllers\TreasuryController;
use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::middleware(['splade'])->group(function () {
Route::get('/', fn() => view('auth.login'))->name('home');
Route::get('/login', fn() => view('auth.login'))->name('login');
Route::get('/register', fn() => view('auth.register'))->name('register');
Route::get('/home', fn() => view('home'))->name('home');
Route::get(
'/mobileRegistrations',
fn() => view('mobileRegistrations')
)->name('mobileRegistrations');
Route::resource(
'/card-replacements',
CardReplacementController::class
)->middleware('auth');
Route::resource('/loan-applications', LoanApplicationController::class)->middleware('auth');
Route::resource('/logs', LogController::class)->middleware('auth');
Route::resource('/users', UserController::class)->middleware('auth');
Route::resource('/roles', RoleController::class)->middleware('auth');
Route::resource('/permissions', PermissionController::class)->middleware('auth');
Route::resource('/treasuries', TreasuryController::class)->middleware('auth');
Route::get('card-replacements/{cardReplacement}/download-pdf', [
CardReplacementController::class,
'downloadPdf',
])->name('card-replacements.downloadPdf');
// Registers routes to support the interactive components...
Route::spladeWithVueBridge();
// Registers routes to support password confirmation in Form and Link components...
Route::spladePasswordConfirmation();
// Registers routes to support Table Bulk Actions and Exports...
Route::spladeTable();
// Registers routes to support async File Uploads with Filepond...
Route::spladeUploads();
});```
Please or to participate in this conversation.