score:0
Accepted answer
try import image as component (correct way, require image - bad practice)
app.js
import photo from './assets/photo.jpg'
...
<intro content={{
image : photo, // pass photo as prop
name : "hello",
text : "an undergraduate electrical and electronic engineering student"
}} />
intro.js
...
<img src={props.content.image}/>
score:-1
remove the require and keep the path '/assets/photo.jpg' react will redirect automatically to the public folder. make sure assets is under public.
Source: stackoverflow.com
Related Query
- React Native Error Cannot find module 'metro-config/src/defaults/blacklist'
- react storybook jest snapshots leads to an error Cannot find module '../../package' from 'node.js'
- 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'
- Cannot find module './assets/photo.jpg' error in React
- Error in production build with Webpack, Babel and React - Error: Cannot find module '@babel/runtime/core-js/get-iterator'
- Console error "Uncaught Error: Cannot find module "/axios" at webpackMissingModule" with react
- ERROR in Cannot find module 'babel-core'. using react.js, webpack, and express server
- Cannot find namespace 'ctx' error when creating Context with react - typescript
- 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'
- Cannot find module 'react-dev-utils/crossSpawn' exception React App
- Dealing with "Failed to load plugin 'react' declared in '.eslintrc': Cannot find module 'eslint-plugin-react'" ESLint error
- Tailwind in React project - getting "Cannot find module 'autoprefixer'" error during setup
- React & Jest: Cannot find module from test file
- Jest fails Cannot find module 'react/lib/React' from 'ReactShallowRenderer.js' after React 16 upgrade
- Cannot find module '../request' error using mock in Jest
- React NextJS app, installed webpack, then removed it: Error: Cannot find module 'webpack/lib/node/NodeOutputFileSystem'
- React Cannot find module - ttf, otf fonts
- How to solve, craco: *** Cannot find ESLint loader (eslint-loader). *** error with ANTd and React (2021)
- React and Docker - Uncaught Error: Cannot find module 'react-player'
- error TS2307: Cannot find module 'react'
- Setting up Jest and Enzyme to test React 15 cannot find module react/lib/ReactTestUtils
- Cannot find module '../../images/Logo.png'.ts(2307) Red Error is Still showing
- Next.js - React SSR Cannot find module './page.scss' when rendering on the server (client side rendered works fine after saving the file)
- Cannot find module 'electron' in Electron + React + Webpack setup
- Jest cannot find module @env React Native
- require(variable) causes the error Cannot find module "."
- getting error : Could not find a declaration file for module 'react-bootstrap-modal'. in react js
More Query from same tag
- Need to modify the URL inside a onClick function while invoking fetch in reactJS
- How to pick color in consecutive manner using function in React?
- Context API loses data on switching router links
- Array push not working inside promise then?
- how to pass an function in window.addEventListener using react js
- React Modal - call function with params onClick, not on render
- Await for userlocation before calculating distance - Refactor to async function
- Parse html tags from a JSON file in ReactJs
- React.forwardRef - get value from child component
- Unable to setState inside child component using the value passed by Parent
- Token visibility in Next.js
- Display different navbar for logged user
- how to retrieve images from server using spring boot and reactjs
- Reactjs pass children value to parent
- passing `onSubmit` as a prop in React.createElement
- How to call Parent containers function from child component in Reactjs
- Warning console while using Sparklines - Reactjs
- Response keeps executing after success in React component
- Why a few this same components works differently in react?
- Axios Interceptor not intercepting error statuses when API called is made
- What is the best way to switch between web app's themes with React & Redux?
- Javascript/React: how to create dynamic variable names for a hook in a loop?
- React-Router open Link in new tab content is opening in same existing tab
- How can I convert the value received from <input type="datetime-local"> to firestore format?
- child component dialog box not closing
- During drag and drop if any component hover over the current component, the current component changes it's style.. This is not happening as expected?
- Remix api parse request body
- Is there a way to get "this.lastID" from sqlite.run() callback using es6 and react classes
- Using keys to call an array for an item list. React.js
- Test component with a store Mocha and Enzyme