0

Consider Folder A with an image 'image.jpg' and Folder B with a html page needing to access the image in Folder A to display image in HTML.

The below code works

 <img src={require('../A/image.jpg')}/>

But when I loop through a JSON something like,

var list=[{'name':'aa','img'="../A/image.jpg"},{'name':'bb','img'="../A/image1.jpg"}] ,

assign them to states and inject into React component like,

<img src={require(this.state.image)}/>

this doesn't work.I just get "Cannot find module ../A/image.jpg" And i don't get why. Thanks in advance for the solutions.

Sankar
  • 6,908
  • 2
  • 30
  • 53
Gayathri
  • 1,776
  • 5
  • 23
  • 50
  • How about when you use `` ? – Ejaz Mar 03 '17 at 17:14
  • @Ejaz no, it doesn't work. The image doesn't get loaded. Refer http://stackoverflow.com/questions/42580130/display-images-in-react-using-jsx-without-import/42580202#42580202 – Gayathri Mar 03 '17 at 17:17

1 Answers1

0

It will not work because RequireJS uses a regular expression matching like this

cjsRequireRegExp = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g

and it expects your argument to be a declarative string literal.

Arshabh Agarwal
  • 556
  • 2
  • 15
  • I don't get the logic still. I actually get like it cannot find the module in that relative url. Even if pattern is concerned, when i try enclosing the url with quotes by concatenation, it doesn't work either. Could you suggest a way to solve this ? – Gayathri Mar 03 '17 at 17:39