I'm using mPDF to generate PDF's on my website.
In my CSS I use to have a image as background:
.page{
height:297mm;
width:210mm;
background:url(../bookletFiles/exam_header.png) no-repeat scroll;
padding:400px 1.6cm 1.7cm 1.6cm;
}
This has been working for a long time. But lately I noticed that, when I declare $mPDF->debug to true, I receive the following error:
<B>mPDF error: </B>IMAGE Error (http://topografieindeklas.nl/wp-content/themes/topografieindeklas/bookletFiles/exam_header.png): Could not find image file
Strangley, when I remove the CSS declaration and use the exact same image in tag's, it is displayed.
I already tried to regenerate the .png file, replace it with a .jpg file but this hasn't had any result.
The only thing I can image that has changed lately, is an upgrade from PHP 5.3 to 5.4 The allow_url_fopen settings is set to true though.
Does anyone has any thoughts on why this image won't load through CSS and how that could be fixed?
Try this in the view of your pdf file.
<?php $dir= $this->webroot."img/cake.icon.png"; ?>
<?php echo $dir; ?>
<img src="<?php echo $dir; ?>">
Related
I'm trying to generate pdf file with laravel and dompdf lib. Here is my code from controller:
public function create(Request $request) {
$pdf = new Dompdf();
$html = Storage::disk('local')->get('public/pdf/template.html');
$pdf->loadHtml($html, 'UTF-8');
$pdf->setPaper('A4', 'portrait');
$pdf->render();
$filename = "Hi!";
return $pdf->stream($filename, ["Attachment" => false]);
}
And in template.html I got some html, somewhere there I got images like this:
<img src="img/logo.png" alt="BTS">
But dompdf cant write this image: Image not found or type unknown. My file system is:
.pdf
...img
......here is images
...template.html
...*some_fonts_files*
But at the same time, fonts are loading fine. What should I do to render images in template.html?
I believe that for dompdf you need to pass a properly accessable url rather than relative paths.
Try
<img src="{{ asset('img/logo.png')}}" alt="BTS">
Alternatively if asset doesn't work please try
<img src="{{ public_path('img/logo.png')}}" alt="BTS">
Also please note that asset uses the public directory as the base_url to calculate the 'asset' from.
Me too i struggled for the same error for 3 days. Also when i tried tricks mentioned above, none of them worked too. But when i changed the image file to .jpg file(extension) everything worked well.
<img src="{{ public_path('img/logo.jpg') }}" >
Laravel version: 5.8.38
PHP version: 7.3
barryvdh/laravel-dompdf version: 0.8.6
You can just print the image path as the src attribute of the <img> tag.
Suppose you have the path to the location of your image in a variable:
$img = asset($imgen);
Yust echo it out like this:
<img src="#php echo $img #endphp">
There seems to be a need to set the protocol and add an additional option:
$pdf->setOptions(['isRemoteEnabled' => true]);
$pdf->getDomPDF()->setProtocol($_SERVER['DOCUMENT_ROOT'])
Or:
$pdf->setProtocol($_SERVER['DOCUMENT_ROOT']);
After this src="/storage/myimage.png" will work.
I tried all tips!! The only one solution that works for me is:
header {
background-image: url("https://example.org/logo.jpg");
}
and
$pdf->setOptions(['isRemoteEnabled' => true]);
$pdf->getDomPDF()->setProtocol($_SERVER['DOCUMENT_ROOT'])
Is it possible to get a background image in CSS like you normally do in HTML when working with WordPress. I've tried doing this but it doesn't work.
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
PHP code cannot run in .css file, however you can use inline style, such as:
<div style="background-image: url("<?php //url ?>");">
or
<style>
.class-name {
background-image: url("<?php //url ?>");
}
</style>
The above would be useful when working with custom fields for dynamic image paths.
If the image is located in the theme directory, PHP won't be needed, let's say the image folder is directly under the theme folder /theme-name/images, and the stylesheet is /theme-name/style.css, then you can just add the background image to the css file as follows:
.class-name {
background-image: url("images/file.jpg")
}
You don't need to use PHP in this question, your CSS file is already in template folder, so you can call image just like this:
background-image: url("images/parallax_image.jpg");
So you don't need to know template path to call images from your theme.
If the image folder is in the theme folder you can use:
background-image: url("/wp-content/themes/themeNameHere/images/parallax_image.jpg ");
Just upload your image to the WordPress Media Library
After that, you can give the path of the uploaded file in your CSS like this:
background-image:url('/wp-content/uploads/2019/12/filename.png');
Note: Open the uploaded image, there will be a path
One way would be to add this CSS to a PHP page that has access to the bloginfo() function. Say in index.php, you would add...
<style>
.some-element {
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
}
</style>
Another way is accessing image using css file location as the reference point, e.g.
.class-name{
background-image:url("../images/file-name");
//one level up, then images folder background-image:url("../../images-directory-02/images/file-name");
//two levels up, then two folders in
}
I was having this issue with adding a background image to my Underscores based theme and I found this works:
background: url('assets/img/tile.jpg') top left repeat;
I first tried:
background: url('/wp-content/themes/underscores/assets/img/tile.jpg');
but that didn't work for me.
Use a style attribute in the tag and use the css.
<div style="background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");">
Your other html here
</div>
As many people have suggested already do not use php in .css ext as it won't get interpreted.
But if you really need to use php because of some reasons you only know as you not responding, you can change the extension of your stylesheet to .php
then you can have
customestyles.php
<?php
header("Content-type: text/css; charset: UTF-8");
$sectionImage = bloginfo('template_directory')."/images/parallax_image.jpg";
?>
<style type="text/css">
.selector{
background-image: url(<?php echo "$sectionImage";?>);
}
</style>
If your images folder is relative to your theme folder that is
theme-folder/images
and that of your css is in this structure theme-folder/css/your-css-file.css
you can easily just traverse the folder path in your css e.g
.custom-element{ background-image: url(../images/name-of-image.png) }
Short answer is you can not render PHP in a CSS file. I would suggest making sure your <rel> tag is setup correctly and just using the /images/parralax_iamge.jpg part.
Just find the corresponding element (tag, class or ID) with the browser tools/inspector in your page and add a CSS rule for that element, either in the stylesheet of the child theme or in the "customCSS" field of the theme options.
you can't add php code into .css files. but if you wanna do this using php see this.
As the others have suggested, you can simply set the background-image CSS property to do this.
However, none of the URLs that the other answers suggest worked for me.
I think the reason is because all of my images were stored in the "Media" area.
For all those who are storing your images in the "Media" area:
In order to find the URL to the image, you can:
Open the Admin dashboard of your site
Open the "Media" area
Click on the image you want to use
Copy the URL from the URL field, but only the portion after the domain name (e.g. domain-name.com)
Use this as your URL for the background-image property
I wouldn't recommend using the whole URL (using it without removing the domain name) because if your domain name ever changes, the URL will break.
Here's an example of what my full URL looked like: https://example.com/wp-content/uploads/2018/06/<Name of the Image>.jpeg, but I only used the /wp-content/uploads/2018/06/<Name of the Image>.jpeg portion.
In the end, my CSS property looked like this:
background-image: url("/wp-content/uploads/2018/06/<Name of the Image>.jpeg");
As a side note, the URL worked with both a beginning forward slash /wp-content/... and without one wp-content/....
In the first div you can see the result from the approved response, in the second div you can see the result from
<div style="background-image: url('<?= get_the_post_thumbnail_url(); ?>');">
The reason it does not work in the first div is because the parser thinks that the first block of text ends where the second " occurs.
You need to echo the get_the_post_thumbnail_url() function
For example
style="background-image: url('<?php echo get_the_post_thumbnail_url();?>
FOLDER STRUCTURE: THEME_FOLDER --> ASSETS --> IMAGES
For using inline CSS which i will not recomment as it create issues when doing optimization test using lighthouse however you can use
.title{backgroound:url(' /assets/images/title.png');
}
OR in theme CSS you can use
background: url('../images/tile.jpg');
Worked for me.
When I generate PDF from html, my img doesn't show on server linux.
In Localhost, my image is getting displayed.
my code css :
background: red url("<?php echo __DIR__ ?/my_img.png");
But on server linux, it's not getting displayed
For Info :
If I write
<img src="<?php echo __DIR__ ?/my_img.png">
I see this image on both server.
EDIT :
I need to repeat image (x and y)
So I don't insert a
I try this
.myimg:after {
background: red url("<?php echo __DIR__ ?/my_img.png");
}
But IMG is not getting displayed.
So I think DOMPDF can't interpret URL in background in CSS.
An idea?
I find :
<img src='data:image/png;base64,<?php echo base64_encode(file_get_contents("myimg.png")); ?>'>
Its works!
I am very new to PHP where the same issue have been facing. Coding a simple welcome php page with a logo in png or jpg format does not show in both development and production server.
Tried using changing the permissions to the folders and files but nothing results.
Any idea?
to do this, you could simply include a PHP echo code segment in your HTML file. for instance,
<html>
<div id="banner">
<?php echo '<image src="logo.jpg" />'; ?>
</div>
</html>
I've used this code to display my logo:
echo "<img src="https://yangtzesolutions.com/wp-content/uploads/2021/07/logo-150x150.png" <?php imageResize(100,100, 150); ?>>";
It will display image from the source URL: https://yangtzesolutions.com/wp-content/uploads/2021/07/logo-150x150.png
I am using DOMPDF to convert the html into PDF and after converting I'm sending that PDF file to user mail id.
Everything is working perfectly but in PDF file I am not able to see the image of logo of my site. I also searched in stackoverflow for previous question such as :- error in pdf image using dompdf ,
dompdf and img tag, image wont show
I also set DOMPDF_ENABLE_REMOTE to TRUE and DOMPDF_PDF_BACKEND to CPDF
my image tag is :-
<img src="http://www.example.com/clients/myprojects/images/logo.png" alt="" /></a>
I'm giving full path of my website but still it does not show image in my PDF file.
Thanks in advance.
use full directory path with .jpg image
It works for me.
<img src="<?php echo $_SERVER["DOCUMENT_ROOT"].'/placeholder.jpg';?>"/>
<img src="<?php echo $_SERVER["DOCUMENT_ROOT"].'\placeholder.jpg';?>"/>
<img src="<?php echo $_SERVER["DOCUMENT_ROOT"].'./placeholder.jpg';?>"/>
Don't put full path of URL, just put foldername/filename.jpg
Example:
<img src="uploads/kuruvi.jpg">
I my case i spend 2 hour finally i got answer
img src not working with url or path you should covert it base64 format
<?php
$data = file_get_contents('https://teafloor.com/wp-content/themes/teafloor2-0/assets/images/logo.png');
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
?>
<?php echo '<div class="company-logo">
<img src="'.$base64.'" alt="base" />
</div>';
?>
or
<img src="<?php echo $base64; ?>" alt="base" />
if I recall it correctly you can put there a full system path to that image - absolute or relative to your script
Remove the alt attribute and changing it from a self-closing tag (/>) to a normal one (>). It worked for me.
Note: dompdf seems to have a bad response to any inline styles on img tags, so I suggest removing them if you´re using any.
//use full directory path something like this
$currentsite = getcwd();
$html = <<<HTML
<html>
<img src="{$currentsite}/sites/all/modules/certificate_handler/image002.png" alt="" /></a>
</html>
HTML;
I did this:
$imgurl = $graficas[$i];
$path_parts = pathinfo($imgurl);
$graficas[$i] = $path_parts['filename'].".jpg";
And works. I hope this would help you too
DOMPDF
working now with png,jpg.
here what I used.
I have index.php file in route folder and image in subfolder namely images.
$image ="images/".$_FILES['image_index_name']['name'];
$htm= '';
You just have to change the line def("DOMPDF_ENABLE_REMOTE", FALSE); to true in the file DOMPDF_CONFIG.INC
Now latest DOMPDF version another, but have the same problem on PHP v5.3
Upgrade to v5.4 or higher
The problem has solved.
I think you could add this
private function change_url_image($data,$url){
$str=$url; //for example "http://localhost/yoursite/";
$str2=str_replace($str,"",$data);
return $str2;
}
to change url for image it's very simple