Displaying images from array of objects fails when mapping

Question

I'm learning ReactJS and I'm trying to display a list of socials from an array of objects just like so :

const baseUrl = "./";
export const SocialData = [
    {
        platform: "Linkedin",
        link: "https://www.linkedin.com/in//",
        icon: baseUrl + "linkedin.png",
    },
    {
        platform: "Github",
        link: "https://github.com/",
        icon: baseUrl + "github.png",
    },
];

Then in my component I would display it like this :

import { SocialData } from "../../data/social";
import "./socials.css";

function Socials() {
  const data = SocialData;
  return <div className="social-contact"> 
{/*     <img src={require('./linkedin.png')}/>
 */}  {
      data.map((item) => {
          return (
          <a href={item.link} key={item.platform}>
            <div className="social-icon-div">
              <img src={ require(item.icon) } className="social-icon" />
            </div>
          </a>
          )
      })}
    </div>;
}

The commented image works just fine, yet when I'm trying to do the same in my map it says and throw this error:

Uncaught Error: Cannot find module './linkedin.png' at webpackEmptyContext (socials|sync:2:1) at Socials.js:14:1 at Array.map () at Socials (Socials.js:7:1) at renderWithHooks (react-dom.development.js:14985:1) at mountIndeterminateComponent (react-dom.development.js:17811:1) at beginWork (react-dom.development.js:19049:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1)

I've tried to put the require in the data directly, it does the same. I also tried

<img src={require( "" + props.src )} alt={props.imageAlt} />

As explained here but nothing did the job. Thanks for your help!

Are you sure the `baseUrl` is correct? The path is relative to the directory the component is in, putting it as `'./linkedin.png'` implies that your image files are in the same folder as `Socials.jsx` — Andrew, Jan 22 '22 at 00:02
@Andrew yes it is in the same folder, and as I said when I simply do `` in my `Socials.js`, it works and the image is displayed, that's why I'm having trouble finding the reason.. :/ — StefanSpeterDev, Jan 22 '22 at 13:29

Cesar Santana · Answer 1 · 2022-10-06T04:11:20.410

Im pretty late to the party but I just ran across the same problem and the only way I figured out how to fix it was saving the image, then importing it as a variable, then using that variable as a template literal for the value of the Link property.

For example:

import linkedinImg from "./img/linkedIn.png"

import githubPng from "./img/github.png"

export const SocialData = [
    {
        platform: "Linkedin",
        link: "https://www.linkedin.com/in//",
        icon: `${linkedinImg}`,
    },
    {
        platform: "Github",
        link: "https://github.com/",
        icon: `${githubImg}`,
    },
];

then it works when you use it in

<a href={item.link} key={item.platform}>

downside to this is I downloaded the img to my computer but I was doing that anyways. Hope this helps anyone down the line.

Displaying images from array of objects fails when mapping

1 Answers1