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} />
Source: stackoverflow.com
Related Query
- Loading image location from JSON file dynamically - (Cannot find module...) React, Next.js
- React & Jest: Cannot find module from test file
- loading json data from local file into React JS
- Jest fails Cannot find module 'react/lib/React' from 'ReactShallowRenderer.js' after React 16 upgrade
- react storybook jest snapshots leads to an error Cannot find module '../../package' from 'node.js'
- Typescript React TS2307 cannot find module json
- cant add image in react getting an error Error: Cannot find module './undefined' when using require
- Create React App Error - Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'node:vm'
- How I can define image in React component if path to image I get from JSON file
- Dynamically Load Project Data from JSON file into React
- How to show a image in React from a JSON file
- Data from one JSON file is overwriting another JSON dataset when trying to use react-select module in a form in React
- Jest cannot find module from file in the same folder
- Cannot display the data from a JSON file in React
- broken logo image when importing from json file in React App
- Image from JSON file to React JS file not displaying
- cant find module while loading image from a relative path with require()
- How to import image into React from public folder through a json file
- how to output a json image file extension from a react applicaiton
- i get this error Error: Cannot find module '../list/songQueue.jpg' ,using json-server i am passing path of my image file
- I want to take a image path from the database and display it in a react component, I am using require(),(Error: Cannot find module) occurs?
- Display images dynamically from json file where path is kept in react js
- Cannot post image file from React frontend to express and MySQL
- jest.mock - Cannot find module in React test file
- Delay loading json data from local file into React JS
- Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any type
- Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'
- Cannot find module 'caniuse-lite/dist/unpacker/agents' when running create react app
- Cannot find module '@babel/plugin-transform-react-jsx-source' when running React App
- Create react app Error: Cannot find module './locale'
More Query from same tag
- Webpack is looking for react in global directory
- How to add an object to another object in array in javascript
- React doesn't create the required elements
- What is the correct syntax for adding the xframe header module to cra rewired?
- How to trigger onClick and onHover CSS animation with ReactJS?
- How to change a useState before history.push in react router
- How to setup react-router to work on localhost and deployment URL under path
- Babel 6: Module parse failed: Unexpected token (ref is a React component)
- React redux useSelector and parameters
- Must React components act like pure functions with respect to their props?
- Property 'props' does not exist on type IntrinsicAttributes & string[]
- I have been trying to use Fetch to get data from an external json file with react but kept getting errors
- re-render component when Moment() changed
- React conditional classnames
- how to push an deleted list from an array to an empty array in reactjs
- React axios await dispatch in UseEffect
- Multiple API calls with Promise.all and dispatch an action
- Error Missing parameter. You must specify location. (How to addListener for nearbySearch )
- getting null and actual result from fetching an API in react
- How to navigate in nextjs without losing state of header component
- Using roles and specific user id to limit what sections can be viewed in react / node / express / mysql?
- How to set height to auto dynamically in React?
- Uncaught (in promise) TypeError: Converting circular structure to JSON
- How to display elements in JSX based on OnChange of react-select element
- How to add an fontawesome icon in my React JHipster application?
- Map query to props with Apollo.js in React
- Is it possible to set a radius of an array of coordinates?
- How to initialise state stored in separate components from a single async request?
- Gatsby: Context update causes infinite render loop
- How to render a div component multiple times with different background color and text in React?