React-pdf: Image: Base64 as src is broken

[ostrgard]

OS:
MacOS 10.14

React-pdf version:
1.0.0-alpha.18

Description:
Base64 as Image src is broken and throws Couldn't fetch image: <string>. isomorphic-fetch, which used node-fetch under the hood throws Error: only http(s) protocols are supported.

I suspect this commit, that implemented isomorphic-fetch: https://github.com/diegomura/react-pdf/commit/72d0454c0876c24386b7a37b53f39293ef3540d0, as it's younger than #216, which seems to conclude that this should be working as expected and documented in the docs.

Suggested actions

• [x] Somehow detect and handle base64 strings as src, as node-fetch simply does not support this. Maybe something like Buffer.from(<string>, 'base64').
• [x] Properly output node-fetch errors for future debugging, instead of just Couldn't fetch image: <string>.
• [x] Add a base64 test case in image.test.js.

Alternatively, remove the instructions from the documentation, if this functionality is unwanted.

How to replicate issue including code snippet (if applies):
https://runkit.com/embed/uj7thrhoup3u

[jmelvin-r7]

I also came across this same issue, and confirmed via other tools that my base64 image string was valid.

[diegomura]

@ostrgard can you review the PR just in case you see something odd?
I tested base64 images in both web and node and are working fine (as well as remote images), but just in case.
Thanks for reporting this issue!

[gavin771]

same for me. No image is rendered.

[Salablefuzzball]

Same. I can see the image element in dom but its size is 0x0 in spite of setting the size. The src is also the correct base64 string.

[kievmontana]

Hi guys!

Make sure that you insert the Image in the correct way:
<Image source={ {uri: 'YOUR IMAGE'} }/>

Next check if your base64 size is not too large. - if the size is ok, it should work.

[luskin]

@kievmontana can you provide a working example? when we use uri it's demanding that we also use headers, body, and method parameters as defined in the SourceObject interface

[kievmontana]

@luskin Hey, it was quite long time ago and I can be wrong but if you receive API related errors as you mentioned, try to check the Headers on the back-end. We had similar issues with our AWS setup. Regarding the code, there is nothing special.

And also pay attention to the size of your image.