Error dynamic image when importing a function from another file

Question

Why I get this error ? I try to import a function, if I just call it, it works fine, and if in require() it gives an error .................................................................................................................................................................................................................................................

getCrashBar.js

 const getCrashBar = tick => {
  if (tick > 5 && tick <= 15) {
    return 'silver';
  } else if (tick > 15) {
    return 'gold';
  } else {
    return 'bronse'
  }
};

export default getCrashBar;

AddBet.js

 import React, {memo, useState} from 'react';
import PropTypes from 'prop-types';
import getCrashBar from '../../../validation/bars/getCrashBar';

const AddBet = memo(({socket, triggeredBet, bets, user, tick}) => {

  const [amount, setAmount] = useState('');
  const [autoCashout, setAutoCashout] = useState('');

  const userBet = (bets, user) => {
    let amount = 0;
    bets.map(e => {
      if (Number(Object.keys(e)[0]) === user.user_id) {
        amount = e[Object.keys(e)[0]].bet.amount;
      }
      return false;
    });
    return amount;
  };

  return (
    <div className="gamecharts-right">
      <h2>Сделать ставку</h2>
      <div className="bet-box-crash">
        {console.log(getCrashBar(tick))} // no error
        <img src={require(`../../../images/gameicons/${getCrashBar(tick)}-big.png`)} alt=""/> // here error
        <span>{(userBet(bets, user) * tick).toFixed(2)} <i className="fa fa-rub"/></span>
      </div>
      <div className="bet-dobet">
                                <span>
                                    <label htmlFor="dobet">Введите значение</label>
                                    <input
                    type="number"
                    className="input"
                    id="dobet"
                    name="amount"
                    onChange={(e) => setAmount(e.target.value)}
                    value={amount}
                  />
                                </span>

        <span>
                                    <label htmlFor="autooutbet">Автовывод</label>
                                    <input type="number"
                         name="autoCashout"
                         onChange={(e) => setAutoCashout(e.target.value)}
                         className="input"
                         id="autooutbet"
                         value={autoCashout}
                         placeholder="6.00"
                  />
                                </span>

        {triggeredBet === 0 &&
        <button
          onClick={() => {
            socket.emit('add_bet',
              {
                room: 'crash',
                amount,
                autoCashout: parseFloat(autoCashout)
              });

            if (amount) {
              setAmount('');
              setAutoCashout('');
            }
          }}>
          сделать ставку
        </button>}

        {triggeredBet === 1 &&
        <button onClick={() => {
          socket.emit('crash_payment');
        }}>Вывести</button>}

        {triggeredBet === 2 &&
        <button>Ожидайте</button>}

      </div>
    </div>
  );
});

AddBet.propTypes = {
  socket: PropTypes.object.isRequired,
  triggeredBet: PropTypes.number.isRequired,
  bets: PropTypes.array.isRequired,
  user: PropTypes.object.isRequired,
  tick: PropTypes.number.isRequired
};

export default AddBet;

You should not do a dynamic require - https://stackoverflow.com/questions/44991669/react-native-require-with-dynamic-string — Tobias Lins, Oct 27 '19 at 15:26

score 0 · Answer 1 · answered Oct 27 '19 at 15:47

0

This work for me

const img = getCrashBar(tick);
return (
<img src={require(`../../../images/gameicons/${img}-big.png`)} alt=""/>
)

answered Oct 27 '19 at 15:47

Стас Рябцев

1,318
4
19
36

Error dynamic image when importing a function from another file

1 Answers1