I want to render star.png
on html, using require
called in Test.js
inside components
directory.
But it gives me error: Uncaught Error: Cannot find module './star.png' ...
.
My directory structure looks like:
- …
- public
- src
- components
- Test.js
- images
- star.png
- index.js
- components
My code:
src/components/Test.js
:
import React from "react"
export default function Test(props){
return (
<div>
<h1>{props.text}</h1>
<img src={props.img && require(`../images/${props.img}`)} />
</div>
)
}
src/index.js
:
import React from "react"
import ReactDOM from "react-dom"
import Test from "./components/Test"
function App(){
let img = 'star.png'
let text = 'Hello'
return (
<Test
text={text}
img={img}
/>
)
}
ReactDOM.render(<App />, document.getElementById("root"))
FULL ERROR:
Uncaught Error: Cannot find module './star.png'
at webpackContextResolve (.*$:10:1)
at webpackContext (.*$:5:1)
at Test (Test.js:8: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)
at beginWork$1 (react-dom.development.js:23964:1)
However it does work if I call require
inside index.js
and just pass the return value of require
as props
like:
src/index.js
:
import React from "react"
import ReactDOM from "react-dom"
import Test from "./components/Test"
function App(){
let img = require('./images/star.png')
let text = 'Hello'
return (
<Test
text={text}
img={img}
/>
)
}
ReactDOM.render(<App />, document.getElementById("root"))
AND src/components/Test.js
:
import React from "react"
export default function Test(props){
return (
<div>
<h1>{props.text}</h1>
<img src={props.img && props.img} />
</div>
)
}
But I don’t want to do operations inside index.js
, I only want to do it inside Test.js
. How can I do that?
(Note: I have this seen thread but it’s completely different.)