image not displayed in pdf created by django

Using Django Templates & Frontend
1

i am new and trying to generated pdf from django template. All is working well but image is not displaying. my view is

def report_pdf(request, sale_id):
    """
    Args:
        request:
        sale_id: ID of the sale to view the receipt
    """
    # Get the sale
    sale = Sale.objects.get(id=sale_id)

    # Get the sale details
    details = SaleDetail.objects.filter(sale=sale)

    template = get_template("results/result_report_pdf.html")
    context = {
        "sale": sale,
        "details": details
    }
    html_template = template.render(context)

    # CSS Boostrap
    css_url = os.path.join(
        settings.BASE_DIR, 'static/css/receipt_pdf/bootstrap.min.css')

    # Create the pdf
    pdf = HTML(string=html_template).write_pdf(stylesheets=[CSS(css_url)])

    return HttpResponse(pdf, content_type="application/pdf")

my template is

{% load static %}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sale Receipt PDF</title>
    <style>

        * {
            color: black;
        }

        body {
            font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
            padding: 0;
            margin: 0;
            color: black;
        }

        .name-company {
            font-size: 25px;
            <!--
                padding: 0;
                margin: 0;
            -->
            font-weight: bold;
            text-transform: uppercase;
            <!--
            text-align: center;
            -->
        }

        table thead tr th {
            border: 1px solid black !important;
            padding: 3px;
        }

        table tbody tr td {
            border: 1px solid black;
            padding: 3px;
        }

        .img-logo {
            margin-top: 10px;
            width: 75px;
            height: 75px;
            margin-bottom: 10px;
        }

    </style>
</head>
<body>
<img src="{% static 'img/plogo1.jpg' %}" alt="My Image"> 
<div class="container-fluid">
    <div class="row border border-dark">
        <div class="col-6">
            <div class="card-body">
				
				<img class="img-profile rounded-circle"
                    src="{% static 'img/plogo1.svg' %}"> 
				
				<p class="name-company"><b>E-Corp</b></p>
				<p><b>135 East 57th Street</b></p>
				<p><b>New York, NY 10011, USA</b></p>
				<p><b>Phone:</b> (213) 484-6829</p>
			</div>
        </div>
        <div class="col-6 border-left border-dark">
            <p><b>Date:</b> {{sale.date_added}}</p>
            <p><b>Sale ID:</b> {{sale.id}}</p>
            <p><b>Customer:</b> {{sale.customer.get_full_name}}</p>
        </div>
    </div>

    <br>

    <!--Tabla de productos-->
    <table class="table" style="width: 100%;">
        <thead>
        <tr style="border: 1px solid black;">
            <th style="width: 5%;" class="text-center">#</th>
            <th style="width: 40%;" class="text-left pl-2">Product</th>
            <th style="width: 5%;" class="text-center">Quantity</th>
            <th style="width: 20%;" class="text-right pr-2">Price</th>
            <th style="width: 20%;" class="text-right pr-2">Total</th>
        </tr>
        </thead>
        <tbody>
        {% for d in details %}
            <tr>
                <td class="text-center">{{forloop.counter}}</td>
                <td class="text-left pl-2">{{d.product.name}}</td>
                <td class="text-center">{{d.quantity}}</td>
                <td class="text-right pr-2 ">{{d.price}} $</td>
                <td class="text-right pr-2">{{d.total_detail}} $</td>
            </tr>
        {% endfor %}
        <tr>
            <td colspan="4" class="text-right pr-2"><b>Subtotal</b></td>
            <td class="text-right pr-2">{{sale.sub_total|floatformat:2}} $</td>
        </tr>
        <tr>
            <td colspan="4" class="text-right pr-2"><b>Tax Inclusive ({{sale.tax_percentage}}%)</b></td>
            <td class="text-right pr-2">{{sale.tax_amount|floatformat:2}} $</td>
        </tr>
        <tr>
            <td colspan="4" class="text-right pr-2"><b>Grand Total</b></td>
            <td class="text-right pr-2">{{ sale.grand_total }} $</td>
        </tr>
        <tr>
            <td colspan="4" class="text-right pr-2"><b>Amount payed</b></td>
            <td class="text-right pr-2">{{ sale.amount_payed }} $</td>
        </tr>
        <tr>
            <td colspan="4" class="text-right pr-2"><b>Change</b></td>
            <td class="text-right pr-2">{{ sale.amount_change }} $</td>
        </tr>
        <tr>
            <td colspan="5">
                <p class="text-uppercase font-weight-bold text-center">
                    Thank you for your preference!
                </p>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

settings

STATIC_ROOT = os.path.join(CORE_DIR, 'staticfiles')
STATIC_URL = '/static/'

# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
    os.path.join(CORE_DIR, 'static'),
)

can any one help me to solve my problem

2

The problem is that the PDF generator, running on your server, doesn’t understand the URL generated by the {% static %} tag. That tag creates a web URL (like /static/img/plogo1.jpg), but the PDF library needs a direct filesystem path to find the image file on your server’s hard drive.

The solution is to determine the image’s absolute path in your view and pass it to the template context.

3

i have amended the view method and put there the absolute url by the following way;

def report_pdf(request, sale_id):
   
    # Get the sale
    sale = Sale.objects.get(id=sale_id)

    # Get the sale details
    details = SaleDetail.objects.filter(sale=sale)

    template = get_template("results/result_report_pdf.html")
    relative_image_url = '/static/img/plogo1.jpg'
    absolute_image_url = request.build_absolute_uri(relative_image_url)
    context = {
        "sale": sale,
        "details": details,
        "image_url": absolute_image_url
    }
    html_template = template.render(context)

    # CSS Boostrap
    css_url = os.path.join(
        settings.BASE_DIR, 'static/css/receipt_pdf/bootstrap.min.css')

    # Create the pdf
    pdf = HTML(string=html_template).write_pdf(stylesheets=[CSS(css_url)])

    return HttpResponse(pdf, content_type="application/pdf")

now it is working but the image is large one, how can i adjust it to fit my card.

4

Show your code and describe your approach that failed.