Search code examples
javascriptjsonimagereact-nativerequire

react-native - Image require local path from JSON


Hello comunity :) I am working on a testapp in react-native and try to get Images from a local storage place. Actual what i am doing: I give an image directlink source to a var and call this method at my render function.

*react: ^0.14.8 ||*
*react-native: ^0.23.1||*
*npm: 2.15.1 ||*
*node: v4.4.4*

Working:

ImageCall-File (Imagefile.js)

var samplepicture;

setPicture(){
    samplepicture= require('./images/picture.png')
}
render() { 
    this.setPicture; 
    return(
        <Image source=samplepicture/>
    ); 
}

The code snippet above works in a created class wich is named after (Imagefile.js)

The method above works pretty fine.

Now my where i want to get to > I want to save the image file in a seperated js file wich is styled like a JSON object.

Not working:

JS_JSON_File (pictureRef.js)

module.exports = {
    "pictureRef": 
{
    "picture": './images/picture.png'
}}

ImageCall_File (Imagefile.js)

var pictureRef = require('./pictureRef.js');
var samplepicture;

setPicture(){
    samplepicture= require(pictureRef.pictureRef.picture);
}
render() { 
    this.setPicture; 
    return(
        <Image source=samplepicture/>
    ); 
}

Debug the samplepicture: samplepicture = ./images/picture.png

Not sure if it is relevant but because it is a string it is formatted without the ' '. Also keep in mind that i need to set the image source by the setPicture() function for my code.

*I debugged both versions of code and had the same output:

  • Version 1: samplepicture = ./images/picture.png
  • Version 2: samplepicture = ./images/picture.png

*

Please keep in mind that this is my first question and i really hoped to format everything right. Also i searched for many related issue´s and didnt find any solution

Thanks for your help.


Solution

  • seems it similar with this issue1 issue2

    i think if you use require() to add your image,you should give a static path,not a variable. because they need know the specific image source to bundle. use json is just like a uncertain source so it doesnt work now there is a pr to this,