When I use React Images won't display when i store the URL in an object-CodePudding

I have just started working with react recently but I have been running into an issue with the project that I am working on where I'm trying to display a list of icons with links.

when storing the src for each icon in the list below it stops the entire page from rendering, and logs an error that it can't find the image. If I paste the scr directly into the code there is no error when loading the images, but for reusability and readability, I thought it would be best practice to map a list into HTML components instead.

import SideLinksCss from './sideLinks.module.css';
export default function SideLinks() {
    const links = [
        {
            name: "linkedin",
            url: "",
            src: "../assets/linkedin-icon.png"
        },
        {
            name: "github",
            url: "",
            src: "../assets/github-icon.png"
        },
    ]
    return (
        <div className="side-links">
            <ul>
                {links.map(link => 
                    <li>
                        <a>
                            <img src={link.src} alt={link.name} />
                        </a>
                    </li>
                    )}
            </ul>
        </div>
    );
}

if there is something dumb I'm missing id love to hear since I'm new to react, or if there is a better way to do it.

CodePudding user response：

You do not need to import or require the images. Just put them in the public folder and they will be available. Then you can do:


function App() {
  const links = [
    {
      alt: "fig1",
      src: "./0001.jpg",
    },
    {
      alt: "fig2",
      src: "./0002.jpg",
    },
  ];
  return (
    <div className="App">
      <ul>
        {links.map((link) => (
          <li key={link.alt}>
            <a>
              <img src={link.src} alt={link.alt} />
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

CodePudding user response：

Because the images aren't imported at the top of the file it is required that you use require() inside the list of links and not inside the mapping function. If you change the code to

import SideLinksCss from './sideLinks.module.css';
export default function SideLinks() {
    const links = [
        {
            name: "linkedin",
            url: "",
            src: require("../assets/linkedin-icon.png")
        },
        {
            name: "github",
            url: "",
            src: require("../assets/github-icon.png")
        },
    ]
    return (
        <div className="side-links">
            <ul>
                {links.map(link => 
                    <li key = {link.name}>
                        <a>
                            <img src={link.src} alt={link.name} />
                        </a>
                    </li>
                    )}
            </ul>
        </div>
    );
}

it will correctly display the images