如何通过 react map 从状态加载图像或 svg src？

Question

https://codesandbox.io/s/load-svg-from-import-via-states-6ycf4q

I am trying to load svg icons in map from state objects but the state is not loading in img src. please help

   {Tabs.map((obj, i) => (
                  <Card className="">
                    <Card.Body>
                      <i className={obj.icon}></i>
                      <img src={obj.iconsvg} />
                      <Card.Title>{obj.tabtitle}</Card.Title>
                      <Card.Link
                        key={i}
                        onClick={() => setActive(obj.tabname)}
                        className="tab"
                      >
                        Click to see more <img src={linkarrow} />
                      </Card.Link>
                    </Card.Body>
                  </Card>
                ))}

Answer 1

Since you import your icons as

import cardicon1 from "./cardicon1.svg";

you must reference this at your iconsvg property

  {
    tabname: "tab2",
    tabtitle: "Chart Color Pale111ttes",
    icon: "fas fa-palette",
    iconsvg: cardicon1
  },

Check this sandbox

Answer 2

You are passing iconSvg as a string value. Instead of that, you need to use the image address that you imported.

Check the updated sandbox.

https://codesandbox.io/embed/load-svg-from-import-via-states-forked-pffjp9?fontsize=14&hidenavigation=1&theme=dark