Styjun

Why does the U.S. military maintain their own weather satellites?

Necessity of tenure for lifetime academic research

How were US credit cards verified in-store in the 1980's?

Why do presidential pardons exist in a country having a clear separation of powers?

How to save money by shopping at a variety of grocery stores?

Terminology of atomic spectroscopy: Difference Among Term, States and Level

Can I lend a small amount of my own money to a bank at the federal funds rate?

What is the practical impact of using System.Random which is not cryptographically random?

Why is there no Disney logo in MCU movies?

Break down the phrase "shitsurei shinakereba naranaindesu"

Should a TA point out a professor's mistake while attending their lecture?

Is "prohibition against," a double negative?

Could a complex system of reaction wheels be used to propel a spacecraft?

What's the origin of the concept of alternate dimensions/realities?

Is this homebrew "Faerie Fire Grenade" unbalanced?

Can authors email you PDFs of their textbook for free?

Storing milk for long periods of time

What caused the end of cybernetic implants?

Welche normative Autorität hat der Duden? / What's the normative authority of the Duden?

In what language did Túrin converse with Mím?

Do universities maintain secret textbooks?

Are sweatpants frowned upon on flights?

In Endgame, wouldn't Stark have remembered Hulk busting out of the stairwell?

What was Captain Marvel supposed to do once she reached her destination?

how to load image in react (getting error module not found)?

React Native - Image Require Module using Dynamic NamesInvariant Violation: Objects are not valid as a React childrequiring image in react-native 0.14.2React Native image as string not foundHow to render images with react on server side?React Native Image component, requiring unknown moduleReact Native: Render Image from props“React.Children.only expected to receive a single React element child” error when putting <Image> and <TouchableHighlight> in a <View>React native: Images are not getting renderedModule not found: Can't resolve '../../assets/img-3.jpg' in ''

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I am trying to show multiple image using map function but getting this error

Cannot find module '../../assets/images/logo-full.png'

Code which is working is fine in render method

[require('../../assets/images/logo-full.png')].map((i)=><img key=i src=i></img>)

Code which is not working in render method and getting above error and why ??

['../../assets/images/logo-full.png'].map((i)=><img key=i src=require(i)></img>)

why require is need in array element not in src?

reactjs react-native redux

share|improve this question

asked Mar 27 at 23:02

user944513user944513

3,7831515 gold badges6969 silver badges137137 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it seems that the problem is about when the images get loaded. The first method is working because it is done at compiled step. The second one is not working because it is called when react renders and I think images are not loaded yet into bundle
  
  – duc mai
  Mar 27 at 23:22
  

  
  
  
  

add a comment | 

0

I am trying to show multiple image using map function but getting this error

Cannot find module '../../assets/images/logo-full.png'

Code which is working is fine in render method

[require('../../assets/images/logo-full.png')].map((i)=><img key=i src=i></img>)

Code which is not working in render method and getting above error and why ??

['../../assets/images/logo-full.png'].map((i)=><img key=i src=require(i)></img>)

why require is need in array element not in src?

reactjs react-native redux

share|improve this question

asked Mar 27 at 23:02

user944513user944513

3,7831515 gold badges6969 silver badges137137 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it seems that the problem is about when the images get loaded. The first method is working because it is done at compiled step. The second one is not working because it is called when react renders and I think images are not loaded yet into bundle
  
  – duc mai
  Mar 27 at 23:22
  

  
  
  
  

add a comment | 

I am trying to show multiple image using map function but getting this error

Cannot find module '../../assets/images/logo-full.png'

Code which is working is fine in render method

[require('../../assets/images/logo-full.png')].map((i)=><img key=i src=i></img>)

Code which is not working in render method and getting above error and why ??

['../../assets/images/logo-full.png'].map((i)=><img key=i src=require(i)></img>)

why require is need in array element not in src?

reactjs react-native redux

share|improve this question

asked Mar 27 at 23:02

user944513user944513

3,7831515 gold badges6969 silver badges137137 bronze badges

[require('../../assets/images/logo-full.png')].map((i)=><img key=i src=i></img>)

['../../assets/images/logo-full.png'].map((i)=><img key=i src=require(i)></img>)

share|improve this question

asked Mar 27 at 23:02

user944513user944513

3,7831515 gold badges6969 silver badges137137 bronze badges

share|improve this question

asked Mar 27 at 23:02

user944513user944513

3,7831515 gold badges6969 silver badges137137 bronze badges

asked Mar 27 at 23:02

user944513user944513

3,7831515 gold badges6969 silver badges137137 bronze badges

asked Mar 27 at 23:02

user944513user944513

3,7831515 gold badges6969 silver badges137137 bronze badges

2 Answers
2

active

oldest

votes

0

You can't pass a variable to require. It needs to know at compile time for require to work. It's explained in the docs. https://facebook.github.io/react-native/docs/images

share|improve this answer

answered Mar 27 at 23:26

DCTIDDCTID

51522 silver badges99 bronze badges

add a comment | 

0

As you mentioned, the images are in an array and you need to render the images by running a map on your array. So the path of the image must also be present in the array.

constructor(props)
 super(props);
 this.state=
 imageArr:['id':1,source:'pathofimage1','id':2,source:'pathofimage2']
 



render(){
 return (
 <div>
 this.state.imageArr.map((item,index)=>
 return (
 <div key=index>
 <img src=item.source alt="image" />
 </div>
 )
 )
 </div>
 )

share|improve this answer

answered Mar 28 at 0:39

ErickErick

20811 silver badge1010 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55387782%2fhow-to-load-image-in-react-getting-error-module-not-found%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You can't pass a variable to require. It needs to know at compile time for require to work. It's explained in the docs. https://facebook.github.io/react-native/docs/images

share|improve this answer

answered Mar 27 at 23:26

DCTIDDCTID

51522 silver badges99 bronze badges

add a comment | 

0

You can't pass a variable to require. It needs to know at compile time for require to work. It's explained in the docs. https://facebook.github.io/react-native/docs/images

share|improve this answer

answered Mar 27 at 23:26

DCTIDDCTID

51522 silver badges99 bronze badges

add a comment | 

You can't pass a variable to require. It needs to know at compile time for require to work. It's explained in the docs. https://facebook.github.io/react-native/docs/images

share|improve this answer

answered Mar 27 at 23:26

DCTIDDCTID

51522 silver badges99 bronze badges

share|improve this answer

answered Mar 27 at 23:26

DCTIDDCTID

51522 silver badges99 bronze badges

answered Mar 27 at 23:26

DCTIDDCTID

51522 silver badges99 bronze badges

answered Mar 27 at 23:26

DCTIDDCTID

51522 silver badges99 bronze badges

0

As you mentioned, the images are in an array and you need to render the images by running a map on your array. So the path of the image must also be present in the array.

constructor(props)
 super(props);
 this.state=
 imageArr:['id':1,source:'pathofimage1','id':2,source:'pathofimage2']
 



render(){
 return (
 <div>
 this.state.imageArr.map((item,index)=>
 return (
 <div key=index>
 <img src=item.source alt="image" />
 </div>
 )
 )
 </div>
 )

share|improve this answer

answered Mar 28 at 0:39

ErickErick

20811 silver badge1010 bronze badges

add a comment | 

0

As you mentioned, the images are in an array and you need to render the images by running a map on your array. So the path of the image must also be present in the array.

constructor(props)
 super(props);
 this.state=
 imageArr:['id':1,source:'pathofimage1','id':2,source:'pathofimage2']
 



render(){
 return (
 <div>
 this.state.imageArr.map((item,index)=>
 return (
 <div key=index>
 <img src=item.source alt="image" />
 </div>
 )
 )
 </div>
 )

share|improve this answer

answered Mar 28 at 0:39

ErickErick

20811 silver badge1010 bronze badges

add a comment | 

As you mentioned, the images are in an array and you need to render the images by running a map on your array. So the path of the image must also be present in the array.

constructor(props)
 super(props);
 this.state=
 imageArr:['id':1,source:'pathofimage1','id':2,source:'pathofimage2']
 



render(){
 return (
 <div>
 this.state.imageArr.map((item,index)=>
 return (
 <div key=index>
 <img src=item.source alt="image" />
 </div>
 )
 )
 </div>
 )

share|improve this answer

answered Mar 28 at 0:39

ErickErick

20811 silver badge1010 bronze badges

constructor(props)
 super(props);
 this.state=
 imageArr:['id':1,source:'pathofimage1','id':2,source:'pathofimage2']
 



render(){
 return (
 <div>
 this.state.imageArr.map((item,index)=>
 return (
 <div key=index>
 <img src=item.source alt="image" />
 </div>
 )
 )
 </div>
 )

share|improve this answer

answered Mar 28 at 0:39

ErickErick

20811 silver badge1010 bronze badges

answered Mar 28 at 0:39

ErickErick

20811 silver badge1010 bronze badges

answered Mar 28 at 0:39

ErickErick

20811 silver badge1010 bronze badges