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
– Andrew, Commented Jan 22, 2022 at 0:02
@Andrew yes it is in the same folder, and as I said when I simply do <img src={require('./linkedin.png')}/> in my Socials.js, it works and the image is displayed, that's why I'm having trouble finding the reason.. :/ — StefanSpeterDev
– StefanSpeterDev, Commented Jan 22, 2022 at 13:29

Cesar Santana · Accepted Answer · 2022-10-06 04:11:20Z

0

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.

edited Oct 6, 2022 at 4:11

answered Oct 6, 2022 at 4:05

Cesar Santana

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Displaying images from array of objects fails when mapping

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related