variable name of src parameter of image in React

Question

How can I define src parameter in React jsx imgage tag? I map an array and I need define src parameter depends on index of array.

import leaf1 from "../../assets/menu-clip/leafes/leaf1.png";
import leaf2 from "../../assets/menu-clip/leafes/leaf2.png";
import leaf3 from "../../assets/menu-clip/leafes/leaf3.png";
import leaf4 from "../../assets/menu-clip/leafes/leaf4.png";
import leaf5 from "../../assets/menu-clip/leafes/leaf5.png";


export default function Menu(props) {


    const menuList = props.menu.menuList;

    return (
        <div className={styles.menuContainer}>
            <ul className={styles.list}>
                {menuList.map( (m,i) => (
                    <li className={styles.menuLi}
                        key={i}>
                        {m.name}
                        <img src={  **leaf + (i+1)** }      // ???????
                             alt="menu lístok"
                             width="50"/>
                    </li>
                )
                )}
            </ul>

        </div>
    )
}

How are you building your app, CRA? Whatever it is, you need to handling support for importing images (I think CRA supports it by default). Then once you do, you can just pass it straight to the src parameter, e.g. src={leaf1} — Jayce444
– Jayce444, Commented Oct 30, 2020 at 8:04
Yes CRA, but I need display image depends on name leaf1, leaf2, leaf3... And I need something like src={ leaf + (i+1) } — mirov
– mirov, Commented Oct 30, 2020 at 8:06
First of all wrap the src in {}. <img src={require('./logo.jpeg')} /> — Prime
– Prime, Commented Oct 30, 2020 at 8:07
Oh woops, my mistake misread the question. You can't reference variable/function names dynamically in that kind of way, so you're best off putting the imported images into an array, and using the index from the menuList map as the index for the leaf image array. Give Adithya's answer a try, that might work — Jayce444
– Jayce444, Commented Oct 30, 2020 at 8:11

Adithya · Accepted Answer · 2020-10-30 08:07:21Z

2

You could store it in a array and reference that

like

const leafs = [leaf1,leaf2,...]
//then 
src={leafs[i+1]}

answered Oct 30, 2020 at 8:07

Adithya

1,7281 gold badge11 silver badges18 bronze badges

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

1 Comment

Jayce444 Over a year ago

@mirov great! If this answers your question, please upvote it and mark as the correct answer (the tick button below the downvote button) so that the question is officially closed :)

Prime · Accepted Answer · 2020-10-30 08:13:11Z

import leaf1 from "../../assets/menu-clip/leafes/leaf1.png";
import leaf2 from "../../assets/menu-clip/leafes/leaf2.png";
import leaf3 from "../../assets/menu-clip/leafes/leaf3.png";
import leaf4 from "../../assets/menu-clip/leafes/leaf4.png";
import leaf5 from "../../assets/menu-clip/leafes/leaf5.png";


export default function Menu(props) {
  const menuList = props.menu.menuList;
  const leafArray = [leaf1, leaf2, leaf3, leaf4, leaf5];
  return (
    <div className={styles.menuContainer}>
      <ul className={styles.list}>
        {
          menuList.map( (m,i) => (
            <li className={styles.menuLi}
              key={i}>
              {m.name}
              <img src={ leafArray[i] }
                alt="menu lístok"
                width="50"/>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

Collectives™ on Stack Overflow

variable name of src parameter of image in React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related