Image not updating when Image src is updated

OS: mac os 10.13.4

React-pdf version: 1.0.0-alpha.17

Description: I am trying to update the PDF with an image dynamically after making changes to a form. Here is the code…

generateOrderPDF = (fields) => {

   var businessData = this.props.user.business;
     if (fields.contact != undefined || fields.contact != '') {
       var orderName = this.generateOrderName();
       var contactName = this.generateContactName();
     } else {
       var orderName = "";
       var contactName = "";
     }

     if (fields.designs.length > 0 && fields.designs[0].image != undefined) {
       var designThumb = fields.designs[0].image;        
     } else {
       var designThumb = '';
     }

     console.log(designThumb)

     return (
         <Document title="Order">
           <Page wrap size="A4" style={styles.page}>

             <View style={styles.header}>


                 <View style={{textAlign:'center'}}>
                   <Image
                     style={styles.logo}
                     src={businessData.logo === '' ? null : businessData.logo}
                   />
                   <Text style={{padding: 5, fontSize:10}}>{businessData.name}</Text>
                 </View>

                 <View style={styles.headerLeftWrapper}>
                   <Text>Order Name: {orderName === "" ? null : orderName}</Text>
                   <Text>Status: {fields.status === "" ? null : fields.status}</Text>
                   <Text>Ordered by: {contactName === "" ? null : contactName}</Text>
                   <Text>Ordered for: {fields.orderedFor === "" ? null : fields.orderedFor}</Text>
                   <Text>Note: {fields.note === "" ? null : fields.note}</Text>
                 </View>

                 <View style={styles.headerRightWrapper}>
                   <Text>Date: {moment(new Date()).format('DD/MM/YYYY')}</Text>
                   <Text>Occasion Date: {moment(fields.occasionDate).format('DD/MM/YYYY')}</Text>
                   <Text>Receiving Date: {moment(fields.receivingDate).format('DD/MM/YYYY')}</Text>
                 </View>

             </View>


             <Image style={{width:400, height:400, marginVertical: 15, marginHorizontal: 100}} src={designThumb} />


             <View style={styles.section}>
               <Text style={styles.body}></Text>
             </View>

             <View style={[styles.section, { bottom: 1 }]}>
               {Footer}
             </View>

           </Page>

         </Document>
     )
 
}

<BlobProvider document={this.generateOrderPDF(this.props.form.getFieldsValue())}>
{({ url }) => (
  <a href={url} target="_blank" style={{marginRight:'5px'}} className="download-pdf-btn ant-btn btn-secondary ant-btn-primary">Print</a>
)}
</BlobProvider>

All other fields on the PDF update accordingly when the value is changed on the form, but the image does not. I am certain that the designThumb is a valid link to an image because…

• I can see it in the console when I update the field on the form.
• If I hard code it into the Image src, I can see the image appear on the PDF.

What’s unusual is that when I go to the playground, and remove the link from one of the Image’s src, it updates as it should with no issues.

Am I doing something wrong?

[dulcineapena1]

anyone else with same CORS problem ? crossorigin=“anonymous” and cache={false} doesn’t work for me 😦

[rakeshbijoriyagate6]

Same CORS issue with me I used crossorigin=“anonymous” and cache={false} doesn’t work for me. Access to XMLHttpRequest at 'https://dgzr31xopt5l5.cloudfront.net/profile_pics/FnB7YJOtWsVyvHN8dKEyvbNmV9V21570438881789.png' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Anyone has solved this issue. Thanks in advance 😃