Reputation: 10243
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.
Upvotes: 4
Views: 11647
Reputation: 111
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.
Upvotes: 2
Reputation: 1294
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.
Upvotes: 7
Reputation: 21
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()} />
Upvotes: 0