Loading a local image using require() doesn't work

[packouray]

Hi,

Is this a bug report?

yes.

Actual Behavior

I'm getting "require() must have a single string literal argument" when I'm trying to require a local image.
Here is what I do :

I'm retrieving the image path as a string from Firebase database and I'm setting a state with it :

profilePicture: user.val().picture_1

here is the path => "../../img/user/profile/blank_profile.png"

Then I'm trying to set my image source using the path that I just retieved :

<Thumbnail large source={require(this.state.profilePicture)}/>

But I'm getting the error "require() must have a single string literal argument".

Thank you in advance !

Expected Behavior

The image is displayed.

Steps to Reproduce

Require a local url from firebase stored in a state.

Environment

Environment:
OS: Windows 10
Node: 6.10.2
Yarn: Not Found
npm: 3.10.10
Watchman: Not Found
Xcode: N/A
Android Studio: Version 2.3.0.0 AI-162.3871768

Packages: (wanted => installed)
react: 16.0.0-beta.5 => 16.0.0-beta.5
react-native: ^0.49.5 => 0.49.5

[lwinkyawmyat]

Hi @packouray, it absolute worked. Can you check on snack?

[talcoolcat]

Apparently it cannot work - require() is processed during transpilling or whatever you want to call a processing that happens during building the app, hence it requires a constant value.
We are using a workaround:

import React, {Component} from 'react';
import {Image} from 'react-native';

class StaticImage extends React.Component {
  constructor(props) {

    super(props);

    this.images = {
      './../assets/img-0.png':require('./../assets/img-0.png'),
      './../assets/img-1.png':require('./../assets/img-1.png'),
      './../assets/img-2.png':require('./../assets/img-2.png'),
      './../assets/img-3.png':require('./../assets/img-3.png'),
      './../assets/img-4.png':require('./../assets/img-4.png'),
      './../assets/img-5.png':require('./../assets/img-5.png')}

      this.actualimage = this.images[props.staticsource]
      console.log("staticsource:",props.staticsource)
  }
  render() {
    return (
      <Image source={this.actualimage} {...this.props}/>
  )}
}

[lwinkyawmyat]

Hi @talcoolcat, Image component can not provided Array props.
If you want to show multi images form array source, you should try with below code.

import React, { Component } from 'react';
import { Image } from 'react-native';

class StaticImage extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
      images: [
        require('./../assets/img-0.png'),
        require('./../assets/img-1.png'),
        require('./../assets/img-2.png'),
        require('./../assets/img-3.png'),
        require('./../assets/img-4.png'),
        require('./../assets/img-5.png')
      ]
    }
  }

  render() {
    const {  images } = this.state 
    return (
      <View>
        { 
          images.map((image, i) => {
            return (
              <Image source={image} {...this.props} />
            )
          })
        }
     </View>
  )}
}

[lwinkyawmyat]

@facebook-github-bot stack-overflow

[facebook-github-bot]

Hey @packouray, thanks for posting this! @lwinkyawmyat tells me this issue looks like a question that would be best asked on Stack Overflow. Stack Overflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

_{How to Contribute • What to Expect from Maintainers}