0

I have tried this

const dashBoardLinks = [
    { title: "Home", path: "/home", src: "home" },
    { title: "Analytics", path: "/analytics", src: "analytics" },
    { title: "Sales", path: "/sales", src: "sales" },
  ];

and I want to map the objects in this ul

<ul className="flex flex-col">
          {dashBoardLinks.map((menu, index) => (
            <a
              href={menu.path}
              key={index}
              className="hover:bg-gray-400 duration-150 py-2 pl-3 flex gap-x-1 items-center">
              <img src={menu.src} alt="" />
              <span>{`../assets/icons/${menu.title}.png`}</span>
            </a>
          ))}
        </ul>

how can I achieve it, thank you in advance

Timothy Nyambane
  • 33
  • 5
  • Where are you hosting these images? `src` must be a valid URL (absolute or relative) to a image file. I don't think `home` is a valid URL. At the very least it needs to be `home.png` or `home.jpg`, but then you need to make sure it is hosted somewhere so that this relative URL works correctly. – Code-Apprentice Jul 19 '22 at 17:41
  • Sorry, I've added the path to the files – Timothy Nyambane Jul 19 '22 at 17:44
  • You added the path to the `` tag which just renders it as text. You need to edit the `src` attribute of the `image` tag or the `src` value in each JavaScript object in your list. – Code-Apprentice Jul 19 '22 at 17:44
  • [This answer](https://stackoverflow.com/q/62110521/19497251) from two years ago should still work. – Yui Jul 19 '22 at 17:46

0 Answers0