[Bug]: header and footer image not loading #71

RVP04 · 2024-02-03T00:36:12Z

RVP04
Feb 3, 2024

What happened?

header blade

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .header {
            font-family: "Courier New";
            position: fixed;
            top: 10px;
            left: 0;
            right: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="header">
    <img src="{{ asset('img/gray-logo.png') }}" width="160" height="70" style="float: right" alt="">
    <p style="display: flex;margin-top: 40px; font-size: 12pt;font-weight: bold;align-items: center;justify-content: center">{{ $reportTitle ?? '' }}</p>
</div>
</body>
</html>

footer.blade.php

<!DOCTYPE html>
<html>

<head>
    <style>
        .footer {
            position: absolute;
            left: 0px;
            right: 0px;
            height: 10px;
            float: left;
            font-size: 7pt;
            border-top: 1px solid black;
            padding-top: 10px;
            font-family: 'Courier New';
        }

        .page-number {
            overflow: hidden;
            float: right;
            margin-right: 40px;
        }

        .report {
            overflow: hidden;
            width: 250px;
            float: left;
            margin-left: 10px;
        }
    </style>
</head>

<body>
<div class="footer">
    <div class="report">Page @pageNumber of @totalPages</div>
    <div class="page-number"><img src="{{public_path('img/broad-logo.png')}}" width="100" height="20"></div>
</div>
</body>
</html>

How to reproduce the bug

PDF budlider

return Pdf::view('reports.pdf.status_subject_wise', [
            'subjects' => $subjects
        ])->headerView('layout.reports.header', ['reportTitle' => 'Feed Back Status - Subject Wise'])
            ->footerView('layout.reports.footer')
            ->format('a4')
            ->orientation(Orientation::Landscape)
            ->margins(2.5, 0.5, 1.2, 0.5, 'cm')
            ->name('Feedback Status - Subject Wise.pdf');

Image is not loading using asset() helper or public_path() there is no sign of image in the document. When use alt attribute it is not showing image not loaded
when use asset() first page logo not showing (image not loaded it is not coming see the image) and if public path is use just a box appears

asset

public_path

need a solution for this isseues

Package Version

1.1.2

PHP Version

8.3.0

Laravel Version

10.40

Which operating systems does with happen with?

macOS

Notes

No use of #44 discussion

No response

RVP04 · 2024-02-07T19:02:04Z

RVP04
Feb 7, 2024
Author

Need help on this please @freekmurze @crynobone @ArielMejiaDev

0 replies

ArielMejiaDev · 2024-02-07T23:21:07Z

ArielMejiaDev
Feb 7, 2024

Hi @RVP04 the images could fail to load for a variety of reasons here my suggestion:

Instead of setting a public_path like this

<div class="page-number"><img src="{{public_path('img/broad-logo.png')}}" width="100" height="20"></div>

an absolute path to an external service eg: (s3) could make it work

// config/brand.php

[
    'brand' => [
        'logo' => 'https://aws/my-bucket/images/brand/logo.png'
    ]
]

// then in your blade component

<div class="page-number"><img src="{{ config('brand.logo') }}" width="100" height="20"></div>

This should fix the issue in all environments, remember that locally a relative path should not work and as you could have more than one environment this could lead to a lot of work just to show an image to check environments, etc.... it is easier to direclty load them externally.

6 replies

ArielMejiaDev Feb 8, 2024

Take in mind that it was just an example, the key is to replace your local path and add instead a absolute path, this means your image src should become from an external URL, you can even host your image in github as an example, but it could be with any other service, eg:

Host your image in github

RVP04 Feb 8, 2024
Author

Okay sir let me try and update you

RVP04 Feb 8, 2024
Author

@ArielMejiaDev i tried all possibilities it is not working sir, @freekmurze please you try and see it will helpful for all

RVP04 Feb 8, 2024
Author

when i use normal view image is loading, only in pdf image is not loading

<img src="{{ asset('img/gray-logo.png') }}" width="160" height="70" style="float: right" alt="">

RVP04 Feb 8, 2024
Author

i also tried this one sir.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .header {
            font-family: "Courier New";
            position: fixed;
            top: 10px;
            left: 0;
            right: 20px;
            text-align: center;
        }

        img {
            background-image: {{ url('img/gray-logo.png') }};
        }
    </style>
</head>
<body>
<div class="header">
    <img width="155" height="70" style="float: right">
    <p style="display: flex;margin-top: 40px; font-size: 12pt;font-weight: bold;align-items: center;justify-content: center">{{ $reportTitle ?? '' }}</p>
</div>
</body>
</html>

i tested on the content it is working. Only on the headerView() and footerView() image is not showing

ArielMejiaDev · 2024-02-08T20:53:34Z

ArielMejiaDev
Feb 8, 2024

@RVP04 @freekmurze I upload a demo with header and footer images working for relative and absolute paths

Here is the demo project link

Video

https://www.loom.com/share/8912fba845214a1d93aefc99fcf93b93?sid=46351d44-b10f-4830-8841-8cbbd61e1b39

I also make a PR GH-79 to solve this with a package solution, please let me know your feedback

1 reply

RVP04 Feb 9, 2024
Author

@ArielMejiaDev appreciated. I am waiting for @freekmurze to check and push the pr to branch

jonaaix · 2025-01-08T19:31:16Z

jonaaix
Jan 8, 2025

I have the same issue, could solve it by converting the image URL to base64 first.
In the header/footer, any urls are not working. Thus also not tailwind.

<header style="width: 100%; display: flex; justify-content: end; padding-right: 1cm;">
   @php
      $logoUrl = $tenant->logo?->getLargeUrl();
      $logo64 = \App\Services\HelperService::imageUrlToBase64($logoUrl);
   @endphp

   <img style="width: 300px;" src="{{ $logo64 }}" alt="Logo">
</header>

Helper function:

public static function imageUrlToBase64(string $imageUrl): string {
  $imageContents = file_get_contents($imageUrl);
  if ($imageContents === false) {
     throw new \RuntimeException("Failed to fetch the image from URL: {$imageUrl}");
  }

  $mimeType = finfo_buffer(finfo_open(FILEINFO_MIME_TYPE), $imageContents);
  $base64 = base64_encode($imageContents);

  return "data:{$mimeType};base64,{$base64}";
}

0 replies

[Bug]: header and footer image not loading #71

Uh oh!

Uh oh!

RVP04 Feb 3, 2024

What happened?

How to reproduce the bug

Package Version

PHP Version

Laravel Version

Which operating systems does with happen with?

Notes

Replies: 4 comments · 7 replies

Uh oh!

Uh oh!

RVP04 Feb 7, 2024 Author

Uh oh!

Uh oh!

ArielMejiaDev Feb 7, 2024

Uh oh!

ArielMejiaDev Feb 8, 2024

Uh oh!

RVP04 Feb 8, 2024 Author

Uh oh!

RVP04 Feb 8, 2024 Author

Uh oh!

RVP04 Feb 8, 2024 Author

Uh oh!

Uh oh!

RVP04 Feb 8, 2024 Author

Uh oh!

ArielMejiaDev Feb 8, 2024

Video

Uh oh!

RVP04 Feb 9, 2024 Author

Uh oh!

jonaaix Jan 8, 2025

RVP04
Feb 3, 2024

Replies: 4 comments 7 replies

RVP04
Feb 7, 2024
Author

ArielMejiaDev
Feb 7, 2024

RVP04 Feb 8, 2024
Author

RVP04 Feb 8, 2024
Author

RVP04 Feb 8, 2024
Author

RVP04 Feb 8, 2024
Author

ArielMejiaDev
Feb 8, 2024

RVP04 Feb 9, 2024
Author

jonaaix
Jan 8, 2025