image output failed in pdf xhtml2pdf

Question

I have my views set up like following:

views.py

class PDFTemplateView(TemplateView):
    Model = TemplateInfo
    template_name = 'hello.html'


    def get(self, *args, **kwargs):
        obj = self.Model.objects.get(id = kwargs['pk'])

        html  = get_template(self.template_name).render(Context({'object' : obj}))

        result = StringIO.StringIO()
        rendering = pisa.pisaDocument(StringIO.StringIO(html.encode("ISO-8859-1")), result)

        if not rendering.err:
            return HttpResponse(result.getvalue(), mimetype='application/pdf')
        return HttpResponse('We had some errors<pre>%s</pre>' % escape(html))

I found a solution in this very feed with the defination of fetch_resource() function but that didnt helped me. I read the documentation and I was better off without the function.

this is my template "hello.html"

<style type="text/css">

@page {
    background-image: url('/media/image/mainbg.jpg'); #this wouldnot give image too
    size: letter portrait;

    @frame header_frame {           /* Static Frame */
        -pdf-frame-content: header_content;
        left: 50pt; width: 512pt; top: 50pt; height: 40pt;
        -pdf-frame-border: 1;    /* for debugging the layout */
    }
    @frame content_frame {          /* Content Frame */
        left: 50pt; width: 512pt; top: 90pt; height: 632pt;
        -pdf-frame-border: 1;    /* for debugging the layout */
    }
    @frame footer_frame {           /* Another static Frame */
        -pdf-frame-content: footer_content;
        left: 50pt; width: 512pt; top: 772pt; height: 20pt;
        -pdf-frame-border: 1;    /* for debugging the layout */
    }

 </style>
 </head>
<div id="header_content">Lyrics-R-Us</div>

<div id="footer_content">(c) - page <pdf:pagenumber>
    of <pdf:pagecount>
</div>

<ul>
    <li>{{ object.emp_name }}</li>
    <li>{{ object.designation }}</li>
    <li>{{ object.image.url }}</li>
</ul>

Everything seems fine till now. But I cannot get the image in the pdf. this {{ object.image.url}} gives me a fie path string in the pdf but not the image. Am i missing something. Help me please. I am stuck for like hours already.

Answer 1

Xhtmltopdf does not use "real" css rules. Your background image must be in pdf format. Try to convert '/media/image/mainbg.jpg' to pdf and use background-image: url('/media/image/mainbg.pdf').