Image not loading from url

[sir-guevara]

The qrcode center image should be loadable from qrcode

[chiptu]

Should be related to Cross Origin Ressource Sharing ,
try to set options.imageOptions.crossOrigin = "anonymous"
maybe check your cors options in your http request from your server

[andrewjdavison]

Thanks for the tip... unfortunately this one didn't work for me. In fact adding this made the entire QR code disappear, where previously it was just showing a white square instead of the central image.

My server is able to fetch other images from S3 just fine, so I presume my general cors settings on the server are fine.

Does anyone else have any ideas?

[piyushsinghania]

Facing the exact same problem @andrewjdavison

[lb-ovc]

For anyone that has the same issue:
We ran into the same bug and have been able to fix it by fetching the image before and creating a object url

[DionPotkamp]

There is currently a bug that when an image fails to load, it does not get handled properly and nothing is returned.
PR #286 will fix the issue.

[ebastidas]

I found a workaround for this issue. I'm running version 1.9.2 on nodejs, and I had the problem that the image at the center was not showing when I tried to create the QR as a png (the option imageOptions.crossOrigin = "anonymous" didn't work for me). What I had to do is to create a QR as a svg and the transform it to png with another library "sharp".

      import * as sharp from 'sharp';

      const qrCodeImage = new QRCodeStyling({
        jsdom: JSDOM,
        nodeCanvas,
        image: 'data:image/png;base64,....', // image in base64
        type: 'svg', // DON'T USE 'png'
        ...options,
      });

      // WARNING: NEVER use qrCodeImage.getRawData('png') as the result won't draw correctly the logo image in the center when the app runs in a some (cloud) servers.
      const bufferSvg = (await qrCodeImage.getRawData('svg')) as Buffer;

      let bufferResult: Buffer;
      if (extension === 'svg') {
        bufferResult = bufferSvg;
      } else if (extension === 'png') {
        bufferResult = await sharp(bufferSvg).png().toBuffer();
      } else {
        throw Error(`Unsupported file extension: ${extension}`);
      }

      return bufferResult;

[woutrbe]

@ebastidas Thank you so much for this. I just spend the last 2 days trying to figure out why logos where not being rendered. I also pre-fetched the image, and converted it to base64, but still nothing.

Outputting it as svg, and converting it to png with sharp was the only thing that actually worked for me.