CODEWITHSUNDEEP
reactjscreate-react-appcode-splitting
Kaiser Soze
Kaiser Soze

Reputation: 1498

Dynamic import with React and create-react-app

I have a component image which is using a value, coming from a loop.

something like:

arr.map(m => <Component imgsrc={m.src} />)

where src prop is a link to the image folder. then I do

<img src={require(`${props.imgsrc}`)} />

but if does not work, however if I use it statically

<img src={require(`same-path-as-src`)} />

it works.

What is the difference?

Upvotes: 1

Views: 253

Answers (1)

Tholle
Tholle

Reputation: 112867

Webpack needs to know in what directory to look, since it needs to know at build time what directories to include in the build. If the entire path is dynamic, Webpack would need to include the entire file system in the build, which would not be feasible.

You can make parts of the path dynamic if Webpack can figure out where to look.

<img src={require(`../images/${props.imgsrc}.png`)} />

Upvotes: 1

Related Questions