React-to-print: External Image links are broken
Description
- I have an image tag that fetches its image from
Google Storagebut the image is broken.
Any ideas how to go about this?
theghostyced
All 8 comments
Hello. Is it broken in general, or just when using react-to-print? Can you please share a codesandbox example if possible? Thanks
MatthewHerbst
on 18 Mar 2020
When using react-to-print the external image from GCP storage links dont show up it instead shows just a broken image link.. Will try to reproduce in a codesandbox
theghostyced
on 19 Mar 2020
Yeah, if you could make a working codesandbox that would be fantastic, thank you
MatthewHerbst
on 19 Mar 2020
Hey @MatthewHerbst I couldnt replicate it on CodeSandbox so i screen recorded it instead, apologies for the screen size
Here is the image link that was generated https://storage.googleapis.com/elliot-images-us/production/842/lookandfeel/SLxB_FullLogo-02.png
Screen record link for the video - https://recordit.co/TlghI5Dc4K
theghostyced
on 19 Mar 2020
I don't see you opening the print window in that video? I really can't do much to investigate without a reproducible example unfortunately.
MatthewHerbst
on 20 Mar 2020
The issue happens when you don't give DOM enough time to load the image once it has the src set. stackoverflow
A quick hack is to download the image blob then convert it to image URL, in advance. Then use it on the print content.
fetch(
'image-url')
)
.then(function(response) {
return response.blob();
})
.then(function(blob) {
var urlCreator = window.URL;
var imageUrl = urlCreator.createObjectURL(blob);
setImageLogo(imageUrl);
});
}
p8ul
on 20 Mar 2020
Thanks a lot @p8ul that solved it.. Thanks also @MatthewHerbst for the time
theghostyced
on 20 Mar 2020
Glad that got figured out, thank you
MatthewHerbst
on 20 Mar 2020
Related issues
jermsam
路
7Comments
icebravo
路
5Comments
404sand808s
路
7Comments
vikmehta
路
3Comments
k-jiang
路
5Comments
Most helpful comment
The issue happens when you don't give DOM enough time to load the image once it has the src set. stackoverflow
A quick hack is to download the image blob then convert it to image URL, in advance. Then use it on the print content.
fetch( 'image-url') ) .then(function(response) { return response.blob(); }) .then(function(blob) { var urlCreator = window.URL; var imageUrl = urlCreator.createObjectURL(blob); setImageLogo(imageUrl); }); }