Level 43
@jswoolf01 did you check the url (maybe a typo in the directory name) ?
<img class="logo" src="{{ url('/img/wba-pdf-logo-2024.png') }}" alt="logo" />
May 1, 2024
7
Level 2
Image not displaying in PDF
My current application includes a blade that generates HTML and turns it into a PDF via the DomPDF library. Unfortunately, it's refusing to display the company logo on the PDF as it's supposed to. The logo works fine on my local copy, but when pushed to the server staging copy or to production, the logo doesn't appear.
Here's the relevant bit of code:
<div class="row col-left w-40">
<img class="logo" src="{{url('/')}}/img/wba-pdf-logo-2024.png" />
</div>
<div class="row col-right w-65">
<div style="text-align: right;">
<h1 style="font-size: 28px;line-height: 28px;white-space: wrap;text-align:center;">
ITEM EVALUATION<br /><span style="text-align:center;"> and </span><br /> BILL OF SALE AGREEMENT</h1>
</div>
</div>
It's supposed to show up with the company logo on the left and the title on the right.
I've already confirmed that the image file is where it's supposed to be on the server. In fact there are two versions of it there, a jpg and a png. Neither one will display. I recently made some changes to the rest of the pdf, but left this snippet alone because it was working. Prior to these changes, the image did display. Now it doesn't. Can anyone here suggest some other fixes to try?
Level 2
@Amaury Yes, I've checked and confirmed the url. If I enter the url directly into the browser url field, I get the graphic, exactly as I should. Also, this was working up until I made some other changes in the code a few days ago. This code, displaying the logo, wasn't changed, but the rest of the pdf was heavily modified.
What really throws me is that this works in my local, test copy of the application, but not on the production version. Could it be a difference in the way the browser is rendering code sent from our production server, as opposed to code from the XAMPP server I have running on my dev PC? If so, would rendering it a different way help - maybe as a table with left and right cells?
Level 43
@jswoolf01 Strange!
Can you change class to style and add a width to the img to check?
Anyway, maybe you should write css in the style tag of your template since tailwind classes are not visible within the PDF?
Level 2
@Amaury I tried displaying the above snippet of code as a one-row table instead of a set of divs, with the graphic in the left cell and the title in the right cell. It didn't make any difference. I tried tweaking the width and height of the cells and of the image. Same result. The styling works perfectly on my local copy of the app, but when I load it to our staging server or to the production server, it simply refuses to show the logo file. I have to wonder if I'm looking at some kind of permissions thing - something that is set one way on my local XAMPP session, but another way on the staging and production servers..
Level 43
@jswoolf01 Maybe you can try with a inline base64 encoded image?
In your local server, you can convert your image to a base64 encoded string
$path = url('/img/wba-pdf-logo-2024.png');
$type = pathinfo($path, PATHINFO_EXTENSION); // here png
$data = file_get_contents($path);
$src = 'data:image/' . $type . ';base64,' . base64_encode($data);
// here 'data:image/png;base64,…………'
dd($src);
Then, in your template you can paste the full string:
<img src="... here the src as a string …">
Level 2
@Amaury This encoding trick worked. Thanks much!
Level 43
@jswoolf01 Glad I could help you and solved your problem.
Please or to participate in this conversation.