Duplicate rendering of png image

Describe the bug I have an assets folder that contains my images. When I tried to import in that image from said assets folder, it renders the image twice, resulting the pdf to look like this screenshot: http://i.imgur.com/IDN6vGr.png

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

I don’t know if my setup applies to the issue in hand at all, but if it makes a difference, I’m using React Boilerplate v3.7.0, here is my entire package.json: https://pastebin.com/KYgcYU9u

Invoice.js:

import React, {useEffect, useState} from 'react';
import UserInvoice from '../../../components/UserInvoice/UserInvoice';
import {PDFViewer} from '@react-pdf/renderer';
import logo from '../../../assets/microphone.png'

/**
 * https://github.com/diegomura/react-pdf/issues/420
 *
 * Some explanation ^ for this weird set up of a component...
 */
const ParentInvoicePDF = ({invoice_number}) =>{
  const [open, setOpen] = useState(false);

  useEffect(() => {
    setOpen(false);
    setOpen(true);
    return () => setOpen(false);
  });

  let lines = {
    description: "30 Minute Piano Lessons with Severus - Jun. 24 (Edmund)",
    quantity: 1,
    unit_price: '2500',
    amount: '2500'
  };

  return(
      <>
        {
          open && (
              <PDFViewer className="parent-invoice-pdf-container">
                <UserInvoice
                    title={invoice_number}
                    logo={logo}
                    date={'12/12/2019'}
                    billTo={'Jason Lee'}
                    lines={lines}
                />
              </PDFViewer>
          )
        }
      </>
  )
};

export default ParentInvoicePDF;

UserInvoice.js:

import React from 'react';
import {
  Document,
  Font,
  Image,
  Page,
  StyleSheet,
  Text,
  View,
} from '@react-pdf/renderer';
import UserInvoiceTable from './UserInvoiceTable/UserInvoiceTable';
import source from '../../assets/fonts/OpenSans-Regular.ttf';

Font.register({ family: 'OpenSans', src: source})

//todo: figure out how to import custom fonts
// https://gist.github.com/karimnaaji/b6c9c9e819204113e9cabf290d580551

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'column',
    backgroundColor: 'white'
  },
  invoiceContainer:{
    padding: 35,
    paddingBottom: 55,
    width: '100%',
    height: '20%',
    flexDirection: 'row'
  },
  logoContainer:{
    width: '30%',
    height: '95%',
    paddingTop: 30,
  },
  invoiceNumberContainer:{
    width: '70%',
    height: '15%',
    textAlign: 'right',
    fontSize: 10,
    paddingTop: 25,
  },
  billToRow:{
    flexDirection: 'row',
    width: '100%',
    textAlign: 'left',
    fontSize: 12,
    marginTop: 30,
    paddingLeft: 35,
    paddingRight: 35
  },
  detailTable:{
    width: '100%',
    padding: 30,
  },
});

const debug = false;

const UserInvoice = ({title, logo, date, billTo, lines}) => (
    <Document title={`${title}.pdf`}>
      <Page size="A4" style={styles.page}>
        <View debug={debug} style={styles.invoiceContainer}>
          <View debug={debug} style={styles.logoContainer}>
            <Image debug={debug} src={logo}/>
          </View>
          <View debug={debug} style={styles.invoiceNumberContainer}>
            <Text style={{fontSize: 25, marginBottom: 15}}>Invoice</Text>
            <View style={{width: '100%', flexDirection: 'row'}} debug={debug}>
              <View style={{width: '75%', textAlign: 'right'}} debug={debug}>
                <Text style={{fontSize: 10}}>Invoice number:</Text>
                <Text style={{fontSize: 10, paddingRight: 10}}>Date of issue:</Text>
              </View>
              <View style={{width: '25%', textAlign: 'right'}} debug={debug}>
                <Text style={{fontSize: 10}}>{title}</Text>
                <Text style={{fontSize: 10}}>{date}</Text>
              </View>
            </View>
          </View>
        </View>
        <View style={styles.billToRow}>
          <Text>Bill to: {billTo}</Text>
        </View>
        <View style={styles.detailTable}>
          <UserInvoiceTable
              description={lines.description}
              quantity={lines.quantity}
              unit_price={lines.unit_price}
              amount={lines.amount}
              subTotal={10000}
              total={10000}
          />
        </View>
      </Page>
    </Document>
);

export default UserInvoice;

Expected behavior When I import in the image, I expect the image to render only once.

Screenshots http://i.imgur.com/IDN6vGr.png

Desktop (please complete the following information):

• OS: Ubuntu 18.04.1 LTS (Bionic Beaver)
• Browser: Google Chrome Version 72.0.3626.81 (Official Build) (64-bit)
• React-pdf version: ^1.6.3

[ze-gomes]

also experiencing this issue. Had to convert .png for .jpg , for some reason not even editing the current .png image (changing size slightly) solved the issue

[victormattosvm]

Same here!