Hosted Images with react-pdf

Question

Here is a react-pdf example, and https://storage.googleapis.com/cbb_logos/conf_logos/conf-1-logo.png is a link to an image that is publicly hosted on GCS. Per GCS, "Anyone with this link can access the object on the public internet"

However, if i copy the link into line 11 in the react-pdf example, the image does not display. Per the docs for their image component, it clearly says: A React component for displaying network or local (Node only) JPG or PNG images, as well as base64 encoded image strings.

Simply put, am I out of luck on this, or is there another way to get hosted images in react-pdf? Perhaps another JS library is better for this? I don't think it's a good idea to save this image locally to my app, as I have 1000 more logos and that would increase my apps size by quite a bit.

Edit1: I gave a quick try using jsPDF using this stackblitz (not mine) https://stackblitz.com/edit/react-w5qb9a?file=src%2FApp.js

I dropped this div

<div style={{ maxWidth: '40px' }}>
    <img
        style={{width: '100%' }}
        src='https://storage.googleapis.com/cbb_logos/conf_logos/conf-1-logo.png' 
    />
</div>

...under the p-tag, then downloaded the PDF, and the image also did not appear. So I am still looking for a solution.

Answer 1

I confirmed this works in a project as the docs say, but it doesn't work for some reason on their own example site, as you noted.

To test, I created a new react project using create-react-app:

yarn create react-app react-pdf-image

Install react-pdf:

cd react-pdf-image
yarn add @react-pdf/renderer

Note: A new version of create-react-app was just released (5.0.0) which uses webpack v5, and at the moment some packages like react-pdf no longer work out of the box. I had to add additional configuration to webpack via the craco package.

Install additional packages:

yarn add process browserify-zlib stream-browserify util buffer assert @craco/craco

Change the scripts section in package.json as below:

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

Next create a new file in the root of the project craco.config.js with these contents:

const webpack = require("webpack");

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          asset: require.resolve("assert"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),
      ],
    },
  },
};

Hopefully this issue will be resolved and if so I'll remove these extra steps.

Finally, replace the contents of the src/App.js file with this code:

import { Document, Image, Page, PDFViewer, Text } from "@react-pdf/renderer";

const MyDocument = () => {
  return (
    <Document>
      <Page>
        <Text>Image test</Text>
        <Image src="https://storage.googleapis.com/cbb_logos/conf_logos/conf-1-logo.png" />
      </Page>
    </Document>
  );
};

const App = () => (
  <div>
    <PDFViewer>
      <MyDocument />
    </PDFViewer>
  </div>
);

export default App;

Back in the root of the project, run yarn start and you should see the rendered PDF with the text and image.

Answer 2

06/2022 For those who are trying to solve it, in addition to liquidki comment, what I had to do:

1: Follow every step of liquidki comment.

2: Add the following libraries:

yarn add browserify-fs node-polyfill-webpack-plugin process

3: In your craco.config.js, add:

const webpack = require("webpack");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {

  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          asset: require.resolve("assert"),
          fs: require.resolve('browserify-fs'),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser.js",
        }),
        new NodePolyfillPlugin(),
      ],
      
    },
    
  },
  
};

Now restart your app and it should be working.

Answer 3

  function returnSrc() {
    const path =  "https://lh3.googleusercontent.com/a-/AOh14GhNkZlYA7Qu9ZHeXoxsJczf3OPuyyNzLi_hFbgEKnU=s96-c";
    console.log("LOG", path);
    let selectedMethod = "GET";
    return { uri: path, method: selectedMethod, body: "", headers: "" };
  }

<Image style={styles.profile} src={returnSrc()} />