search

zedomel / certificate-generator

PHP script to generate certificates for participation in events.
GNU General Public License v3.0
35 stars 11 forks source link

Image is not being loaded #7

Open ashishrevar opened 4 years ago

ashishrevar commented 4 years ago

I have put images in img folder. If I open HTML file in browser then it displays image in browser correctly. But when I apply certgen.php file then in all PDFs, it is showing no image.

<!DOCTYPE html >
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="utf-8" />
</head>

<body>
    <div style="margin-left:350px; margin-top: 380px;">
        <p>{{ firstName }}</p>
       <img src="img/1.png">
    </div>    
</body>
</html>

image

zedomel commented 4 years ago

Hi @ashishrevar ,

did you try to use the full path to the image?

<img src="/home/user/folder/img.1png">

Let me know if it works.

br.

ashishrevar commented 4 years ago

Hello, Thanks for your reply. image

This is what I get when I open sample.html in the browser. But if I run command on the terminal within that folder then it doesn't get an image. image

I have placed the Certificate folder in the htdocs directory.

My code is as stated below: image

sample.html is within the examples directory. It has a neighbor directory "img" which has an image. But I am facing issues with the image.

Sorry for the long post but it is confusing for me to rectify. Please help.

zedomel commented 4 years ago

@ashishrevar

please try to set the full path of the image as I said before.

ashishrevar commented 4 years ago

Hi, thnx for your reply.

I observed and made a little change. If I write background-image: url("examples/img/New.png"); then image is being displayed.

I have prepared a certificate as a png file with A4 sie. I am not able to make it full size. Is there any special change you made here?

<!DOCTYPE html >
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="utf-8" />
<style type="text/css">
    body{
        /* height: 826px;
        width: 1169px; */
        position: relative;
        top:0px;
        left:0px;
    }
    div {
       background-image: url("examples/img/New.png");   
       background-size: 3508px 2480px;
       height: 826px;
        width: 1169px;        
       /* background-size: contain; */
       position: fixed;
       top:0px;
        left:0px;
    } 
    p{
        margin-left:350px; 
        margin-top: 380px;
    }
</style>
</head>

<body>
    <div>
        <p>{{ firstName }}</p>       
    </div>    
</body>
</html>

One more help, it is taking 10+ seconds to send/mail single certificate. Why?

ashishrevar commented 4 years ago

Is it possible to fix the certificate image as background without any white border at all 4 corners?

ashishrevar commented 4 years ago

I tried the height and width. I tried positions and background-size but the certificate is not coming proper.

image

My code is like this:
<!DOCTYPE html >
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="utf-8" />
<style type="text/css">
    body{
        /* height: 100%;
        width: 100%;
        background-color: blue;
        padding:0px;
        margin:0px;
        position: fixed; */
        background-image: url("examples/img/New2.png");   
        background-size: 100% 100%;
        top:0px;
        left:0px;        
        position: absolute; 
        height: 100%;
        width: 100%; 
        /*position: relative;
        top:0px;
        left:0px; */
    }
    div {

        /* height: 826px;
        width: 1169px;            
       position: fixed;
       top:0px;
        left:0px;
        background-color: brown; */

       /* background-image: url("examples/img/New.png");   
       background-size: 3508px 2480px;
       height: 826px;
        width: 1169px;            
       position: fixed;
       top:0px;
        left:0px; */
    } 
    p{
        margin-left:350px; 
        margin-top: 380px;
    }
</style>
</head>

<body>
    <div>
        <p>{{ firstName }}</p>       
    </div>    
</body>
</html>