Loading image location from JSON file dynamically - (Cannot find module...) React, Next.js

Question

I'm trying to dynamically load information from this JSON file and plug it into a component.

{
    "team": [
        {
            "id": "",
            "name": "",
            "role": "",
            "bio": "",
            "major": "",
            "image": "akh.jpg"
        },
       {
            "id": "",
            "name": "",
            "role": "",
            "bio": "",
            "major": "",
            "image": "chr.jpg"
        }
    ]
}

The location of my code is /pages/about/index.js and my JSON file is in /pages/about/about.json.

They way I'm parsing the code is like this:

var data = require('./about.json')
var teams = data['team'];

<ul>
   {teams.map((person) => {
      var basePath = "/public/images/profiles/";
      var loc = require(basePath + person.image);
      return <ProfileCard key={person.id} id={person.id} name={person.name} role={person.role} major={person.major} image={loc} />
   })}
</ul>

The component is located in the same file. I'm only attaching the img element from the profile since the rest work fine.

<img className="" src={require(props.image)}></img>

If I take out the img element or put in an actual path, it works perfectly but this way isn't working. The only similar post I could find was this one, but it never got an answer. StackOverflow: importing image dynamically (React Js) (Require img path cannot find module)

Updated Code 1:

<ul>
  {teams.map((person) => {
    var basePath = "/public/images/profiles/";
    return <ProfileCard 
       key={person.id} 
       id={person.id} 
       name={person.name} r
       role={person.role} 
       major={person.major} 
       image={`${basePath}/${person.image}`} />
   })}
</ul>

And the component is now like this after removing require().

<img src={props.image}></img>

Updated Code 2: Switched to next/image from img and it works! I had to remove the last / and it worked.

Jay Kariesch · Accepted Answer · 2020-12-18 20:07:41Z

3

In NextJS images are served from / (root), so you shouldn't have to use public in your path, or use require for that matter. Just generate a standard string. It should be as simple as...

import aboutJson from './about.json'

const teams = aboutJson[teams]

const basePath = '/images/profiles/'

const Teams = () => (
   <ul>
      {teams.map((person) => <ProfileCard 
         key={person.id} 
         id={person.id} 
         name={person.name} 
         role={person.role} 
         major={person.major} 
         image={`${basePath}/${person.image}`} 
       />
   )}
   </ul>
)

const ProfileCard = ({ image, ...props }) => <img src={image} />

Also, next does provide its own image component:

import Image from 'next/image'

const ProfileCard = ({ image, ...props }) => <Image src={image} />

edited Dec 18, 2020 at 20:07

answered Dec 18, 2020 at 19:46

Jay Kariesch

1,4929 silver badges14 bronze badges

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

5 Comments

Akhil Sukhthankar Over a year ago

This may be the sign of an underlying issue because when I remove the require, the images don't load at all. I get the "image not found" square symbol.

Jay Kariesch Over a year ago

Can you post your updated code? Also, I updated my example to remove public.

Jay Kariesch Over a year ago

Also updated with the next/image component.

Akhil Sukhthankar Over a year ago

Removed the /public and require() and updated the post. Still doesn't work. Haven't tried the next/image component yet but looks promising.

Akhil Sukhthankar Over a year ago

It worked after I removed the extra / at the end of basePath. Thank you!

Collectives™ on Stack Overflow

Loading image location from JSON file dynamically - (Cannot find module...) React, Next.js

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related