Cannot add images from html. about react-native-html-to-pdf

[SychevSP]

As far as I understand there are two methods in android to load html into webview
loadData and loadDataWithBaseURL

loadDataWithBaseURL permits to load local images like
file:///data/user/0/your.app.package.id/cache/abc.jpg
While loadData does not permit to load local files.

In my app i needed to create PDFs with local images
so in java/android/print/pdfConverter.java I changed:

//mWebView.loadData(mHtmlString, "text/HTML; charset=utf-8", null);
mWebView.loadDataWithBaseURL("", mHtmlString, "text/HTML", "utf-8", null);

and it worked for me

Interestingly, ability to load html with loadDataWithBaseURL was added to the project in commit 7028f6e
but for some reason was removed in commit e33b86f

[esutton]

This work for me on both Android and iOS:

1. base64 images
2. Local image files
3. Images packaged in Android assets or iOS Bundle:

1. base64 embedded image data

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAA5NJREFUWEfVl7tOG0EUhrdJHiB5gETJE3C1wUiAbUDiJiouBS096aBBlEDtmA4QJWkBwSsgUVJQoJACgQIWEtiyYsxkvuXMenbXXq9JiuSXjmTPmfn/45kzZ46d/worKytv+/r6UgMDA1+6uro20un0t8HBwT0+M6YtxRyZ/vegRT739PTktVCho6NDRVl3d3eht7c3pwP9JMtfj/n5+fepVOqrJq4GhWJYlbVwCF1rmJiYSCYSiR9BYr0LanZ2Vi0tLXljy8vL7hg+ey4GB1xCGw+ZTCaryco20cjIiNre3la3t7cKVKtVNT4+7trz87M7hm9ra0sNDw/7gtBcpWw2mxH6aBCtLd7Z2anW19dVqVRyRWwUi0XXgmBsbW3NXWsHMTk5mRCZ+uC87G3Xn9Xh4aHQhrG/v68ODg7kWxishcPiu1xcXHwncmFIwrmTiT5KHExPT6u5uTn5Vh9wGE4MDZHzg6umJ3jZzrZHgXMfHR1VU1NTMtIYcBne9vb2is6njyJbA/fcTCLh6p25DQLQhced2wyPj49qaGjICwItkX0B1UsniVdkyPZmqFQqELlBmFsQBTgNvy5WPxcWFt6IvONQXo1TB+JdtSiUy2W2UyWTSfdKNsPNzY3vVvT399dqA3XcOCgocVAoFFRbW5tr7EYczMzMeAGgKfKOo3/1hnFQ4Z6enmRJY+RyOY8sn8/LaGOwS3b1RFPkHYdXzTgwqlu9AmNwd3fnK7t8vr+/F28YDw8PamxszJuPoSny7hXcs526GkYGwPbbAWBUvkaoFwCaIu8/Ah6WOFm9ubkZCmJ3d1e8YcAJt5mLpsi/LgkB276zs+MFQpYfHx+LNwwqp9HxJaH+0vI1tHF0dOReR9ZTG05PT8VTw/X1tSeO+a4hhYhOxjh5UlvFyckJpO56fb7q4uJCPC+ILESANspM4D2PSsJGOD8/d0szHJy3QbAUoyWyNdDDaaf3GEVldRSurq7U6uqqOjs7kxHlchleXT1/6R36ILJ+tPocx0Hs5xi02pA0A2sDDcn3yIYESEtWMosw3nPOMQgKDBYEc+1tx3TiFXUx6haZaNBABoMgichkXjXAe0FDYjelXDXm2AmHIa7PPS308UADqXFpE2HkBq9asC23i4xtbHvsXx4E50XS0EbVI48ysp21Tc88DujhaKMoIPXEbGMO97zhVfsTUL0oodRxHpPgn1N8oQr3b8NxfgOgvsOjwyVIMgAAAABJRU5ErkJggg==" />

2. Local image file:

Android:
<img 
src="file:///storage/emulated/0/documents/acme-electronics.png" 
style="height:26px;float:left;border:0px solid red" 
/>

3. Images packaged in Android assets or iOS Bundle:
   Android assets:

<img 
src="file:///android_asset/res/images/clientLogo.png" 
style="height:26px;float:left;border:0px solid red" />

iOS resource bundle:

<img 
src="/Users/edward3/Library/Developer/CoreSimulator/Devices
/F1680929-8154-4FB1-8210-E7F284F6A374/data/Containers/Bundle/Application
/920B65D1-16DC-4241-9DD9-685219DD43F9/FieldScout.app//res/images/clientLogo.png" 
/>

[karein]

This work for me on both Android and iOS:

1. base64 images
2. Local image files
3. Images packaged in Android assets or iOS Bundle:

1. base64 embedded image data

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAA5NJREFUWEfVl7tOG0EUhrdJHiB5gETJE3C1wUiAbUDiJiouBS096aBBlEDtmA4QJWkBwSsgUVJQoJACgQIWEtiyYsxkvuXMenbXXq9JiuSXjmTPmfn/45kzZ46d/worKytv+/r6UgMDA1+6uro20un0t8HBwT0+M6YtxRyZ/vegRT739PTktVCho6NDRVl3d3eht7c3pwP9JMtfj/n5+fepVOqrJq4GhWJYlbVwCF1rmJiYSCYSiR9BYr0LanZ2Vi0tLXljy8vL7hg+ey4GB1xCGw+ZTCaryco20cjIiNre3la3t7cKVKtVNT4+7trz87M7hm9ra0sNDw/7gtBcpWw2mxH6aBCtLd7Z2anW19dVqVRyRWwUi0XXgmBsbW3NXWsHMTk5mRCZ+uC87G3Xn9Xh4aHQhrG/v68ODg7kWxishcPiu1xcXHwncmFIwrmTiT5KHExPT6u5uTn5Vh9wGE4MDZHzg6umJ3jZzrZHgXMfHR1VU1NTMtIYcBne9vb2is6njyJbA/fcTCLh6p25DQLQhced2wyPj49qaGjICwItkX0B1UsniVdkyPZmqFQqELlBmFsQBTgNvy5WPxcWFt6IvONQXo1TB+JdtSiUy2W2UyWTSfdKNsPNzY3vVvT399dqA3XcOCgocVAoFFRbW5tr7EYczMzMeAGgKfKOo3/1hnFQ4Z6enmRJY+RyOY8sn8/LaGOwS3b1RFPkHYdXzTgwqlu9AmNwd3fnK7t8vr+/F28YDw8PamxszJuPoSny7hXcs526GkYGwPbbAWBUvkaoFwCaIu8/Ah6WOFm9ubkZCmJ3d1e8YcAJt5mLpsi/LgkB276zs+MFQpYfHx+LNwwqp9HxJaH+0vI1tHF0dOReR9ZTG05PT8VTw/X1tSeO+a4hhYhOxjh5UlvFyckJpO56fb7q4uJCPC+ILESANspM4D2PSsJGOD8/d0szHJy3QbAUoyWyNdDDaaf3GEVldRSurq7U6uqqOjs7kxHlchleXT1/6R36ILJ+tPocx0Hs5xi02pA0A2sDDcn3yIYESEtWMosw3nPOMQgKDBYEc+1tx3TiFXUx6haZaNBABoMgichkXjXAe0FDYjelXDXm2AmHIa7PPS308UADqXFpE2HkBq9asC23i4xtbHvsXx4E50XS0EbVI48ysp21Tc88DujhaKMoIPXEbGMO97zhVfsTUL0oodRxHpPgn1N8oQr3b8NxfgOgvsOjwyVIMgAAAABJRU5ErkJggg==" />

2. Local image file:

Android:
<img 
src="file:///storage/emulated/0/documents/acme-electronics.png" 
style="height:26px;float:left;border:0px solid red" 
/>

3. Images packaged in Android assets or iOS Bundle:
   Android assets:

<img 
src="file:///android_asset/res/images/clientLogo.png" 
style="height:26px;float:left;border:0px solid red" />

iOS resource bundle:

<img 
src="/Users/edward3/Library/Developer/CoreSimulator/Devices
/F1680929-8154-4FB1-8210-E7F284F6A374/data/Containers/Bundle/Application
/920B65D1-16DC-4241-9DD9-685219DD43F9/FieldScout.app//res/images/clientLogo.png" 
/>

https://github.com/christopherdro/react-native-html-to-pdf/issues/92#issuecomment-816059653
#92

i had the same issue, these comments helped me a lot.
this is how it worked for me to get the assets image
<img src="file:\\android_asset\\images\\img.png" />

[gerriet]

Similar problem here (using Android emulator): images from the web (https) are working fine, but local files inside the document folder do not, for example by adding <img src="file:///storage/emulated/0/Documents/test.png"/> at the end of the HTML string in the example app (and having this image at the location). Also tried without file://, same result: I get the PDF but without any image content.

[deyanmakedonski]

Sorry for the question, but how should i use that baseURL, cause everything is working fine on iOS, but in Android the images are empty.

Thank you in advance

[esutton]

@gerriet Perhaps an Android manifest permissions issue?

WRITE_EXTERNAL_STORAGE gives your READ and WRITE

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

[RShah512]

Same issue as @gerriet in iOS simulator too

[gerriet]

@esutton File access seems not to be the problem as I can read the file into a base64 string (via react-native-fs) and with this string I get the image into the PDF.

[esutton]

@gerriet Sorry, I am not sure why it will not work for you.

I like minimal examples, however, it would be nice to have an example that contains an image file and adds path to html image src, and creates PDF, and displays it. I may do this if I find spare time.

For the app I am developing, I added a view and used react-native-pdf to help quickly display the generated PDF to help debug efficiently.

[ggunti]

I have exactly the same problem.
<img src="file:///storage/emulated/0/Documents/test.png"/> do not show the image in PDF
(where '/storage/emulated/0/Documents/test.png' is valid path)

With base64 work, but I do not want to keep the base64 data in my redux store for each photo because it make my app too slow

[fedoud32]

i have the same issue , i'm using firebase url for my images but it shows no images

[pbaker0804]

@SychevSP Your fix worked for me for android, but it feels dirty modifying it directly. Do we know if it was removed on accident?

[chocopondo]

i have this same issue, works only image from web in Android. local files do not. Any suggestions?

thanks a lot

[quangcanh2975]

As far as I understand there are two methods in android to load html into webview
loadData and loadDataWithBaseURL

loadDataWithBaseURL permits to load local images like
file:///data/user/0/your.app.package.id/cache/abc.jpg
While loadData does not permit to load local files.

In my app i needed to create PDFs with local images
so in java/android/print/pdfConverter.java I changed:

//mWebView.loadData(mHtmlString, "text/HTML; charset=utf-8", null);
mWebView.loadDataWithBaseURL("", mHtmlString, "text/HTML", "utf-8", null);

and it worked for me

Interestingly, ability to load html with loadDataWithBaseURL was added to the project in commit 7028f6e
but for some reason was removed in commit e33b86f

It worked for me in Android. Thanks a lot!

[shehzadosama]

@fedoud32 I was facing the same issue, firebase storage image urls not showing in PDF. I had to convert them into base64 string and pass it in html img src like this:

<img src=${`data:image/png;base64,${user.img_base_64}`} />

where user.img_base_64 contains base64 string of image.

[himat]

If anyone wants, they can do yarn remove react-native-html-to-pdf and then yarn add https://github.com/ConvergeTechnology/react-native-html-to-pdf.git to install the repo where I made the change that @SychevSP suggested.

This fix works for me on android, and after you add the new package, all the usage and everything is the same.

[luizaugustoventura]

As far as I understand there are two methods in android to load html into webview
loadData and loadDataWithBaseURL

loadDataWithBaseURL permits to load local images like
file:///data/user/0/your.app.package.id/cache/abc.jpg
While loadData does not permit to load local files.

In my app i needed to create PDFs with local images
so in java/android/print/pdfConverter.java I changed:

//mWebView.loadData(mHtmlString, "text/HTML; charset=utf-8", null);
mWebView.loadDataWithBaseURL("", mHtmlString, "text/HTML", "utf-8", null);

and it worked for me

Interestingly, ability to load html with loadDataWithBaseURL was added to the project in commit 7028f6e
but for some reason was removed in commit e33b86f

Nice man, you just saved me days of working. Thanks a million 👏👏👏👏

[christopherdro]

The fix is released in v0.9.0