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

Question

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.

Remove `require`, first off. But how you do it depends a bit on your build tooling and how you've set up your project. Simply passing your src path to the `` tag might work in your setup. — rschristian, May 08 '22 at 04:11
I removed require as suggested, I still can't load the images the way I had intended since they just display the alt text. Would the issue with the images loading be something with importing them or how its compiled with react? — jonlev03, May 08 '22 at 04:20
Check: browser devtools->network tab->images filter , may be paths are wrong — Oleg, May 08 '22 at 04:22
Could the path be wrong if it works when replacing link.src with the same relative path stored in link.src? — jonlev03, May 08 '22 at 04:26
Please share your folder structure. Or maybe this can help you. https://stackoverflow.com/questions/34582405/react-wont-load-local-images — TeachMe, May 08 '22 at 04:40

score 0 · Answer 1 · answered May 08 '22 at 04:36

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

score 0 · Accepted Answer · answered May 08 '22 at 04:48

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;

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

2 Answers2