QR-Code not displayed in Google Chrome when center image is defined #64
Comments
previously if the image was already loaded, changing the value of the QR code would make it disappear. this change fixes that by immediately drawing the image if the complete property is true may help with #64 - although as reported that was essentially the reverse of this situation :/ ref: - https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete
|
I attempted to reproduce this today, but only succeeded in reproducing a similar but different issue where the QR Code still rendered correctly but the center image disappeared. I've put a fix up (#71) for that which will be released in v8.0.1 If you could provide a stackblitz or similar that reproduces the issue for you I'd be happy to investigate further |
* fix: re-draw already loaded center images on change previously if the image was already loaded, changing the value of the QR code would make it disappear. this change fixes that by immediately drawing the image if the complete property is true may help with #64 - although as reported that was essentially the reverse of this situation :/ ref: - https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete * chore: update version/changelog
|
I'm facing this issue today as well, but only on Android. |
|
@rala72 which version of Could you provide a https://stackblitz.com/ that reproduces it for you? |
|
I'm sorry, I got confused with the qr code libraries and it looks like I'm using |
|
I observe the same problem only on a specific android phone, Samsung A33, which is a 2022 phone. All other androids and iPhones, some quite older, show the I am not sure how to create a stackblitz with me exact app settings, I simply copy pasted the boilerplate code from here and changed the What happens is that when I navigate to the QR page, the QR shows for a split second, then the centerImage appears and the QR disappears behind it. |
Description:
We are using the ng-qrcode library ^7.0.0 in our Angular project to display qr-codes for a specific URL. This issues was found using the Google Chrome browser. We tested different browsers on our end. You can see the browsers and versions below. The only Browser that had such problems was Google Chrome. All other browsers were working as expected with a center image in the qr-code.
Issue Reproduction:
When we first fetch the data and create a qr-code url the qr-code is properly displayed in our UI.
When we send a second request, fetch new data and re-create the qr-code url, the qr-code is not displayed anymore.
A workaround for this issue was to simply remove the center image from the code and everything was running fine again in Google Chrome. We assume there might be an issue within the library.
<!--<qr-code [value]="qrCodeUrl" centerImageSrc="assets/img/logo-small-white-background.svg"></qr-code>--><qr-code [value]="qrCodeUrl"></qr-code>Versions:
We tested this issue in
The text was updated successfully, but these errors were encountered: