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//

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.