Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

image cant be loaded from firebase

See original GitHub issue

Describe the bug I cannot load images from my firebase account to the pdf. only blankspace is shown

Expected behavior Image should render

Snippet

const MyDocument =(
      <Document>
        {filteredImages.map((data, i) =>{
          let url = data.imageURL
          return(
            <Page size="A4" style={newstyles.page}>
              
              <View>
                <Text>{data.title}</Text>
                
                <Image
                  style={newstyles.image}
                  src={url}
                  allowDangerousPaths ={true}
                />
              <Text style={newstyles.url}>{url}</Text>
              </View>
          </Page>)
        })}

somename (1).pdf

Issue Analytics

State:
Created 5 years ago
Comments:10 (2 by maintainers)

Top GitHub Comments

2reactions

geeksambhucommented, Mar 7, 2019

@nultron I am able to render pdf image with png base64 string , Here is my sample setup

     <Page style={styles.body}>
                <Text style={styles.title}>{data[key].title || key}</Text>
                <View style={styles.container}>
                    <Image cache={false} style={styles.containerImage} src={data[key].image || data[key]} />
                        {weekData}
                </View>
       </Page>

1reaction

ghostcommented, Mar 4, 2019

hey @diegomura sorry i am a new both to react and git,

issue is: i expect to see the image from the image url which i entered which as u mentioned is a valid url:

https://firebasestorage.googleapis.com/v0/b/proof-of-execution-redington.appspot.com/o/images%2F291b6e11-4af9-4ce9-b72c-373ae08956fd.png?alt=media&token=d04327cb-cedd-4f6d-b2f5-60cea739727c.

i am fetching this url by reading database in firebase itself.

as i have printed the url also in pdf the data is accessible.

as attached the pdf is also printing just fine except the image is not being shown.

System information: OS: Mac OS Mojave Version 10.14.3 Browser: Google Chrome Version 72.0.3626.119 (Official Build) (64-bit) React version 16.8.3 @react-pdf/renderer version 1.4.0

this is my entire code to generate the pdf:

import { Page, Text, Image, View, Document, StyleSheet, PDFDownloadLink } from '@react-pdf/renderer';
.......

const newstyles = StyleSheet.create({
     .....
      image: {
        marginVertical: 15,
        marginHorizontal: 100,
        height: 300,
        flexGrow: 8,  
        padding: 10,
      },
    });

const MyDocument =(
      <Document>
        {filteredImages.map((data, i) =>{
          let url = data.imageURL
          return(
            <Page size="A4" style={newstyles.page}>
              
              <View>
                <Text>{data.title}</Text>
                
                <Image
                  style={newstyles.image}
                  src={url}
                  allowDangerousPaths ={true}
                />
              <Text style={newstyles.url}>{url}</Text>
              </View>
          </Page>)
        })}
        
      </Document>)
    
    const PDF = () => {
      return (
        <div>
          <PDFDownloadLink document={MyDocument} fileName="somename.pdf">
            {({ blob, url, loading, error }) =>
              loading ? "Loading document..." : "Download now!"
            }
          </PDFDownloadLink>
        </div>
      );
    };


.......


<PDF/>//to call PDFDownloadLink

Please tell me any more information u need e.g. in terms of code

P.S. I really appreciate the prompt response, Sir.