Rendering images from remote url

[RuhiuEdwin]

Hi, @kempsteven, Im having trouble with the generated pdf, for some reason i am not able to get the image rendered. Kindly assist. Here is my code:

` <vue-html2pdf :show-layout="false" :float-layout="true" :enable-download="true" :preview-modal="true" :paginate-elements-by-height="1400" :filename=event.event_name :pdf-quality="2" :manual-pagination="false" pdf-format="a4" :pdf-margin="10" pdf-orientation="portrait" :html-to-pdf-options="htmlToPdfOptions" pdf-content-width="800px" @progress="onProgress($event)" @beforeDownload="beforeDownload($event)" @hasStartedGeneration="hasStartedGeneration()" @hasGenerated="hasGenerated($event)" ref="html2Pdf">

EVENT NAME

{{event.event_name}}

LOCATION

{{event.location}}, {{event.city}}

DATE

{{new Date (event.start_date).toLocaleDateString('en-us', { day: '2-digit', month: 'short', year: 'numeric',}) }}

TIME

{{ new Date(event.start_date).toLocaleTimeString('en-us', { hour: '2-digit', minute: '2-digit' }) }}

TICKET TYPE

{{ticket.ticket_name}}

TICKET PRICE

KES {{ticket.ticket_price}}

TICKET NUMBER:

{{details.ticket_number}}

//this image is not rendered in the pdf generated//

//this renders as its static//

        </vue-html2pdf>

htmlToPdfOptions() {
  return {
    html2canvas: {
      taintTest: true,
      useCORS: true
    }
  }

download(){
  this.$refs.html2Pdf.generatePdf();
},

`

here is my preview

Here is the generated pdf

[pianistprogrammer]

My best guess is that this is a CORS issue, check your developer console. Its most likely the problem, make sure you have this on the header from where the image is being served --Access-Control-Allow-Origin: * , Access-Control-Allow-Methods: GET,OPTIONS.

[RuhiuEdwin]

I tried html2canvas: { useCORS: true } but it persisted. I managed to work around it by converting the image to base-64 before generating the pdf.