score:2

Accepted answer

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} />

Related Query

More Query from same tag