i am going to add image in pdf file using flask. when i add img tag in my html code, it won't appear. how can i add image in my pdf?
i found something like to convert in base64, but i don't know how to do it in python.
below is my flask route code.
@app.route('/pdf')
def pdf_template():
rendered = render_template('pdf_template.html')
css = ['main.css']
pdf = pdfkit.from_string(rendered,False,css=css)
response = make_response(pdf)
response.headers['Content-Type'] = 'application/pdf'
response.headers['Content-Disposition'] = 'inline; filename=output.pdf'
return response
here is my pdf_html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>QUOTATION</h1>
<table class="table table-bordered" width='375'>
<tr>
<th>Address</th>
<td>pakistan</td>
</tr>
<tr>
<th>Tel</th>
<td>0213123456</td>
</tr>
<tr>
<th>Mobile</th>
<td>03211234567</td>
</tr>
<tr>
<th>Email</th>
<td>[email protected]</td>
</tr>
<tr>
<th>Website</th>
<td>www.example.com</td>
</tr>
</table>
<img src="static/logo.jpg" alt="" width="150" height="150">
<br>
<p class="solid" bgcolor="FFFFFF">Quote To</p>
<br>
<div>
<table class="table table-bordered">
<tbody>
<tr>
<th>OUR REF</th>
<td>{{query1.ourref}}</td>
<th>TO</th>
<td>{{query1.to}}</td>
</tr>
<tr>
<th>DATE</th>
<td>{{query1.date}}</td>
<th>ATTN</th>
<td>{{query1.attn}}</td>
</tr>
<tr>
<th>FROM</th>
<td>{{query1.fromq}}</td>
<th>EMAIL/FAX</th>
<td>{{query1.emailfax}}</td>
</tr>
<tr>
<th>PRC BASIS</th>
<td>{{query1.prcbasis}}</td>
<th>YR REF</th>
<td>{{query1.yrref}}</td>
</tr>
<tr>
<th>LEAD TIME</th>
<td>{{query1.leadtime}}</td>
<th>VALIDITY</th>
<td>{{query1.validity}}</td>
</tr>
<tr>
<th>PAYMENT</th>
<td>{{query1.payment}}</td>
<th>REMARKS</th>
<td>{{query1.remarks}}</td>
</tr>
</tbody>
</table>
</div>
<br>
<table id="itemtable" width="925" id="particular" border="1px solid black" >
<thead>
<tr bgcolor="#FF0000">
<th ><font color="#fff">NO</th>
<th><font color="#fff">PART NAME</th>
<th><font color="#fff">QTY</th>
<th><font color="#fff">U/PRICE</th>
<th><font color="#fff">AMOUNT in RS.</th>
</tr>
</thead>
<tbody>
{% for items in query %}
<tr height="88px" >
<td width="2"0 style="border-top:none; border-bottom:none;">{{items.id}}</td>
<td width="400" style="border-top:none; border-bottom:none;">{{items.itemname}}</td>
<td style="text-align:center; border-top:none; border-bottom:none;" width="100">{{items.qty}}</td>
<td style="text-align:center; border-top:none; border-bottom:none;" width="100">{{items.price}}</td>
<td style="text-align:center; border-top:none; border-bottom:none;" width="150">{{items.qty * items.price}}</td>
</tr>
{% endfor %}
{% for i in range(8 - count) %}
<tr height="95px">
<td width=20></td>
<td width=400></td>
<td style="text-align:center;" width="100"></td>
<td style="text-align:center;" width="100"></td>
<td style="text-align:center;" width="150"></td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr bgcolor="#FF0000">
<td style="text-align:center;"></td>
<td style="text-align:right;"colspan="3"><font color="#fff">TOTAL PAK RUPEE.</td>
<td style="text-align:center;" ><font color="#fff">6250</td>
</tr>
</tfoot>
</table>
<p>17%GST EXTRA</p>
<p>PARTIAL ORDER SUBJECT TO OUR CONFIRMATION</p>
<p>THE PRICE MAY CHANGE, IF THE US DOLLAR CONVERSION RATE FLUCTUATES.</p>
<h4 style="float:right;"> <small>For </small>HAMZA ENTERPRISES </h4>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
the pdf is something like this
Put below image tag in desired location in your HTML.
If you want to be consistent of your image size, I highly recommend putting below image tag into a table structure.
For converting image to base 64, try https://www.base64-image.de/