fix: fixing many image rendering issues

worknenjoy · Sep 19, 2023 · 03352ad · 03352ad
1 parent 5c4f9c5
commit 03352ad
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 8 deletions.
diff --git a/frontend/src/components/Stats/CurrentMonthStats.js b/frontend/src/components/Stats/CurrentMonthStats.js
@@ -74,7 +74,7 @@ export default class CurrentMonthStats extends Component {
             <Percent>-05%</Percent>
             <Money>$213,314.52</Money>
           </InfoPart>
-          <img src={ require('./Asstes/graph.png') } alt='graph' width='120px' />
+          <img src={ require('./Asstes/graph.png').default } alt='graph' width='120px' />
         </Body>
       </Wrapper>
     )

diff --git a/frontend/src/components/payment/payment-type-icon.js b/frontend/src/components/payment/payment-type-icon.js
@@ -2,15 +2,15 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedMessage } from 'react-intl'
 
-const logoPaypal = require('../../images/paypal-icon.png')
+const logoPaypal = require('../../images/paypal-icon.png').default
 const creditCardIcon = require('../../images/credit-card-icon.svg')
 
 const PaymentTypeIcon = props => {
   return (
     <div>
       { props.type === 'paypal'
-        ? (<div style={ { textAlign: 'left' } }><img src={ logoPaypal } width={ 24 } /></div>)
-        : (<div style={ { textAlign: 'left', color: '#12789a', fontSize: 8 } }><img src={ creditCardIcon } width={ 24 } /> <br />
+        ? (<div style={ { textAlign: 'left' } }><img src={ logoPaypal } width={ 32 } /></div>)
+        : (<div style={ { textAlign: 'left', color: '#12789a', fontSize: 8 } }><img src={ creditCardIcon } width={ 32 } /> <br />
           { !props.notext &&
             <span>
               <FormattedMessage id='payment.creditcard' defaultMessage='Credit Card' />

diff --git a/frontend/src/components/profile/account-details.tsx b/frontend/src/components/profile/account-details.tsx
@@ -203,7 +203,7 @@ const AccountDetails = ({
                 { account && account.data.country
                   ? <Grid item xs={ 12 } md={ 12 }>
                     <div style={ { display: 'flex', alignItems: 'center', padding: 20 } }>
-                      <img width='48' src={ require(`../../images/countries/${countryCodes.find(c => c.code === account.data.country).image}.png`) } />
+                      <img width='48' src={ require(`../../images/countries/${countryCodes.find(c => c.code === account.data.country).image}.png`).default } />
                       <Typography component='span' style={ { marginLeft: 10 } }>
                         { countryCodes.find(c => c.code === account.data.country).country }
                       </Typography>

diff --git a/frontend/src/components/profile/account.js b/frontend/src/components/profile/account.js
@@ -955,7 +955,7 @@ class Account extends Component {
                                 <FormattedMessage id='account.register.country.label' defaultMessage='The country you chose to create your account' />
                               </Typography>
                               <Chip
-                                avatar={ <Avatar><img width={ 72 } src={ require(`../../images/countries/${this.state.countryImage}.png`) } /></Avatar> }
+                                avatar={ <Avatar><img width={ 72 } src={ require(`../../images/countries/${this.state.countryImage}.png`).default } /></Avatar> }
                                 label={ this.state.countryLabel }
                                 className={ classes.chip }
                               />

diff --git a/frontend/src/components/profile/country-picker.js b/frontend/src/components/profile/country-picker.js
@@ -115,7 +115,7 @@ class CountryPicker extends Component {
               { countryCodes.map((item) => {
                 return (
                   <Button variant={ this.state.currentCountryCode === item.code ? 'outlined' : '' } onClick={ (e) => this.handleCountry(e, item) } className={ classes.countryItem }>
-                    <img width='48' src={ require(`../../images/countries/${item.image}.png`) } />
+                    <img width='48' src={ require(`../../images/countries/${item.image}.png`).default } />
                     <Typography component='span'>
                       { item.country }
                     </Typography>

diff --git a/frontend/src/components/team/team.js b/frontend/src/components/team/team.js
@@ -113,7 +113,7 @@ export default function Team (props) {
       <Section>
         <Grid container spacing={ 3 } style={ { backgroundColor: 'black' } } justify={ 'center' } alignItems={ 'center' } >
           <Grid item lg={ 4 } md={ 4 } sm={ 6 } sx={ 12 }>
-            <img src={ require('../../images/core-team-page-asset.png') } alt='assets' />
+            <img src={ require('../../images/core-team-page-asset.png').default } alt='assets' />
           </Grid>
           <Grid item lg={ 4 } md={ 5 } sm={ 6 } sx={ 12 } >
             <form onChange={ onChange } onSubmit={ onSubmit } onBlur={ onBlur }>