Question

77

React Native require(image) returns number

rated 0 times [ 83] [ 6] / answers: 1 / hits: 16256 / 6 Years ago, wed, september 19, 2018, 12:00:00

I have a js file with one component EventCard, which takes event name, date, event image etc. If event image does not exist I want to load a placeholder image. Now that statement looks like this

constructor(props){

    super(props);

    let imgUrl = props.image ? props.image : require(../assets/images/image.jpg);

    this.state = {image: imgUrl}

}

I am using this.state inside render for source like

source={{uri: this.state.image}}

I strangely get 11 when doing a require for the placeholder image and the react native throws error saying 'value for uri cannot be cast from Double to String'.

Help is much appreciated.

Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cameron

Add To Favorites

Follow

Total Points: 591

Total Questions: 112

Total Answers: 88

Location: Botswana

Member since Sat, Jan 7, 2023

1 Year ago

cameron questions

1 How do I map for every two elements for react?

Mon, Jul 13, 20, 00:00, 4 Years ago

1 How do I display 3 card components horizontally with react bootstrap and grids?

Tue, Jun 23, 20, 00:00, 4 Years ago

1 TypeError: this.props.location.state is undefined -

Thu, May 28, 20, 00:00, 4 Years ago

1 How to extract price using javascript from coingecko API in a nested array

Thu, Dec 26, 19, 00:00, 5 Years ago

1 Post request to my express server returns an error

Fri, Aug 23, 19, 00:00, 5 Years ago

View All

answered 6 Years ago virginia · Accepted Answer

You need to assign image source directly when using require.

constructor(props){

  super(props);

  let imgUrl = props.image ? { uri: props.image } : require(../assets/images/image.jpg);

  this.state = { image: imgUrl };

}

and then in your render:

source={this.state.image}