React Load Images and Dynamically Display in Component

Question

I have been trying for a few hours to get a react component to load an image of a playing card depending on the prop passed in. I have been looking online and the answers I find to this issue are confusing me.

Basically I have an assets/cards directory with an image for each card in a deck of 52 playing cards. I want to map the code for the card (e.g sJ 'jack of spades') to the corresponding image. I thought this would be simple, but it doesn't seem so. I have the code below, but the require part is not working. Is there a preferred design patter for doing this sort of thing?

let images = {};

function getCard(val) {
  if(val + 2 < 11) {
    return (val + 2).toString();
  } else {
    switch(val + 2) {
      case 11:
        return 'J';
      case 12:
        return 'Q';
      case 13:
        return 'K';
      case 14:
        return 'A';
    }
  }
}


function getSuit(val) {
  switch (val) {
    case 0:
      return 's';
    case 1:
      return 'd';
    case 2:
      return 'c';
    case 3:
      return 'h';
  }
}

for(let i=0;i<4;i++) {
  for(let j=0;j<13;j++) {
    images[`${getSuit(i)}${getCard(j)}`] = `../assets/cards/${getSuit(i)}${getCard(j)}.png`;
  }
}


const CardImage = (props) => {
  return (
    <img src={require(images[`${props.card}`])} alt={props.card} />
  );
}

export default CardImage;

UPDATE

The component is available at https://codesandbox.io/s/distracted-dan-es7tb?file=/src/App.js

Could you create a working example on codesandbox and share link with me, I would like to see this :-) Thanks. Also provide some comments about what you are trying to achieve in your component or somewhere there. — Imran Rafiq Rather
– Imran Rafiq Rather, Commented Jan 30, 2021 at 9:11
There is a upload option on the left side, where you create your folders and files — Imran Rafiq Rather
– Imran Rafiq Rather, Commented Jan 30, 2021 at 17:20
I'm trying to get this ready, it is having problems uploading the images. — OptimusPrime
– OptimusPrime, Commented Feb 4, 2021 at 7:19
It's located here, but still need to add the images codesandbox.io/live/i3rzuk3. — OptimusPrime
– OptimusPrime, Commented Feb 4, 2021 at 7:21

amirreza mojarad · Accepted Answer · 2021-01-30 09:07:03Z

1

you cant add src attribute like that import all images like this

import blah from '../assets/images/blah.png'

then you must return blah in your code for value of src instead of your code

answered Jan 30, 2021 at 9:07

amirreza mojarad

3702 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

OptimusPrime Over a year ago

I tried this as well, but it returns the value as a string. For example src="blah" in the rendered component. Would you be able to advise what this should look like in the JSX please?

amirreza mojarad Over a year ago

dont return string. return bluh not 'bluh'

OptimusPrime Over a year ago

<img src={props.card} alt={props.card} /> will render as <img src="blah" alt="blah" />. Can you explain how to return it as blah please, I am not with you. Sorry, I'm not that great at react.

OptimusPrime Over a year ago

I can get it to work by importing all 52 images and by having a monolithic case statement to select the image. It's disgusting code though, surely there is a better way to do this and others have done it before?

amirreza mojarad Over a year ago

i dont think so

Lygis · Accepted Answer · 2021-01-30 07:42:57Z

0

Maybe have className={name that changes depending on number you get} like so and then in css you tell which className has what cardImg behind it. You should use state to change className.

answered Jan 30, 2021 at 7:42

Lygis

1007 bronze badges

Collectives™ on Stack Overflow

React Load Images and Dynamically Display in Component

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related