DEV Community

Kevin Ilondo
Kevin Ilondo

Posted on • Edited on

Display images dynamically (from a variable) in React Native

You are probably working on a mobile and you want to design images that you got from an API or maybe the path to that image is stored using React Context API, but there is one problem: whenever you do this

const my_variable = '../assets/image.jpg';
<Image
source={require(my_variable)}
/>
Enter fullscreen mode Exit fullscreen mode

You get an error.
The solution to this problem is to require the file in the variable like this

const my_variable = require('../assets/image.jpg');
<Image
source={my_variable}
/>
Enter fullscreen mode Exit fullscreen mode

Doing this will definitely solve your problem and If you have any question regarding React Native or this specific post, feel free to ask, who knows, maybe other developers are going through the same problem and discussing certain issues here might help a lot of people.

8Bit style Retro mechanical keyboard
Noise canceling headphones with Alexa built-in

Top comments (0)