add variable to require in ImageBackground

Question

I am using ImageBackground from react-native lib. ImageBackground using source={require('asd.png')} for example.

But I am trying to add variable inside to require.

const [image,setImage] = useState('./asd.png')

.then(image => {
            setImage(image.path) // gives 'something.png'
          });

<ImageBackground source={require(image)></ImageBackground>

But I am getting error. Invalid call at line 122: require(image)

Is your image a `network image` ?? – Kartikey May 02 '21 at 18:43 — Kartikey, May 02 '21 at 18:43

Kartikey · Answer 1 · 2021-05-02T18:51:46.923

0

// Declare a varible here...
const img = require('./asd.png')  

// Example of a network image
const networkImage = "https://images.pexels.com/photos/799443/pexels-photo-799443.jpeg"  

const [image, setImage] = useState(img) // Use it here like this

// Static Image Usage
<ImageBackground 
    source={image} 
    style={{ flex: 1, resizeMode: 'cover', justifyContent: 'center' }}>
</ImageBackground> 

// Network Image Usage
<ImageBackground 
    source={{uri : networkImage}} 
    style={{ flex: 1, resizeMode: 'cover', justifyContent: 'center' }}>
</ImageBackground>

This is the proper way to use ImageBackground

Check this Snack to see working example

Also, have a look at the docs for more help.

As the Docs says,

// GOOD (this is also correct)
<Image source={require('./my-icon.png')} />;

// BAD (this is wrong...)
var icon = this.props.active
  ? 'my-icon-active'
  : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD (this is correct)
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;

edited May 02 '21 at 18:51

answered May 02 '21 at 18:01

Kartikey

4,516
4
15
40

But I need to change only './asd.png' name – newUser May 02 '21 at 18:15
For that what you should do is....create a variable `const img = require('./something.png')`.....then for changing it...Do like this....... `setImage(img)` – Kartikey May 02 '21 at 18:18
I really didnt get it. what should I write in useState then? – newUser May 02 '21 at 18:21
Edited the answer..Check again – Kartikey May 02 '21 at 18:23
ok mate I but when I onPress and select a new path. I am just sending path to the setImage('something.png') – newUser May 02 '21 at 18:24
I am not changing the path in require in your code.I edited the code to give some info – newUser May 02 '21 at 18:25
No...for changing image you have to do this...`setImage(require('something.png'))`...Check the snack again...I've implemented changing image in my snack link – Kartikey May 02 '21 at 18:27
When it becomes something.png => to anotherting.png. How can I change it. because I cant also make it like this.require(""+ variable). – newUser May 02 '21 at 18:29
In your example it is still static. I am getting value like 'something.png' I need to change it. Inside the require – newUser May 02 '21 at 18:30
I don't think you can change the images the way you want...It can only be done when the images are `remote` ..a `url` or something..but not with static images. – Kartikey May 02 '21 at 18:33
I get what you are trying to do but its not possible with static images.. – Kartikey May 02 '21 at 18:33
then how people use add dynamic variable inside ImageBackground with url. – newUser May 02 '21 at 18:36
That's what I am saying....You can change it dynamically when `image` is a `uri`...something like `https://www.example.com/image.png` ..Then your way is correct..but when you want to use an image which is inside you project folder (as in your case)..then its not possible dynamically.. Check my points at the end of my answer – Kartikey May 02 '21 at 18:38

add variable to require in ImageBackground

1 Answers1