PDF does not display image

[gonzaRey]

so this is my HTML

<div class="row" #coverPage>
      <div class="col-12 enhancement-paragraph cover-paragraph-space">
            <img src="/assets/images/rp-logo-cover.svg" width="25%">
         </div>
         <div class="col-12 enhancement-paragraph cover-paragraph-space">
            <h3 style="color:#0076CC"> Product Release Notes</h3>
        </div>
    </div>

and my JS:

public prtintPDF() {
    let element = this.coverPage.nativeElement;
    html2pdf(element, {
      margin:       0.5,
      filename:     'test.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { dpi: 192, letterRendering: true, proxy: 'http://localhost:4201', allowTaint:true,useCORS:true, imageTimeout:	0  },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    });
  }

I am using angular 4.

as you can see on the setting I tried out everything that I have seen in the issues and in the documentation. added the proxy even when it is in the same filesystem as the image. Also, added the cors and the tainted properties. I have tried using them in a different order as well. plz help @eKoopmans

[alicankahramaner]

I live the same problem myself.

I am using vuejs

@eKoopmans please help.

[SteveKipp]

What browser are you using? I am having a similar issue in firefox specifically but not chrome. (both on latest version)

[alicankahramaner]

I using chrome and safari

[oscar-gardiazabal]

• don't use overflow style
• be sure images have same cors origin

[champi-dev]

Any fix for this issue? I'm experiencing this same problem😔

[wattsparas]

Anyone having this issue can use this workaround

toDataUrl = (url, callback) => { const xhr = new XMLHttpRequest(); xhr.onload = () => { const reader = new FileReader(); reader.onloadend = () => { callback(reader.result); }; reader.readAsDataURL(xhr.response); }; xhr.open('GET', url); xhr.responseType = 'blob'; xhr.send(); };

_renderImages(images) { const { classes } = this.props; return images.map((image, key) => { this.toDataUrl(image.name, (myBase64) => { }); return ( <img alt="" key={key} className={classes.image} src={image.name} /> ) }); }

before rendering images just convert that image into blob . It has worked in my case

[smartITNinja]

There's no issue here, it's an expected CORS functionality. Just replace your image's URI accordingly.

[christiansaavedra]

Two things got me fixing this:

1. Allow CORS in your server. In my case I use AWS S3, so I went to configuration and there you have the instruction to activate it

2. Add a "crossorigin" attribute with a "*" value to your img html tags. I used javascript for this:

let imagenes = document.getElementsByTagName("img"); for (let i = 0; i < imagenes.length; i++) { imagenes[i].setAttribute("crossorigin", "*");

[buildsomethingdifferent]

i had this issue then I converted images to Blob and this is only solution , if you are run time displying pdf then try

  const file = image.target.files[0]
  let blob= URL.createObjectURL(file);
  
  or get blob from server side otherwise you'd end up getting CORS issues.

[rajeshwarpatlolla]

we are also having the same issue. Is there any workaround for this issue?