# React P5 loading image question. How do I pass prop values to preload image?

**URL:** <https://discourse.processing.org/t/react-p5-loading-image-question-how-do-i-pass-prop-values-to-preload-image/16961>\
**Category:** Libraries\
**Created:** [January 8, 2020, 5:12pm UTC](https://discourse.processing.org/t/react-p5-loading-image-question-how-do-i-pass-prop-values-to-preload-image/16961 "2020-01-08T17:12:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![eagle3y3z](https://avatars.discourse-cdn.com/v4/letter/e/a698b9/32.png) [@eagle3y3z](https://discourse.processing.org/u/eagle3y3z)\
**Post date:** [January 8, 2020, 5:12pm UTC](https://discourse.processing.org/t/react-p5-loading-image-question-how-do-i-pass-prop-values-to-preload-image/16961/1 "2020-01-08T17:12:16Z")

</div>

I am relatively new to P5 and I just don’t quite understand how to load an image using react p5-wrapper and the prop values together. I’m gettting an error that my img variable is not being read and is undefined. The only alternative solution I have seen is @atoro but it doesn’t quite do dynamic image loading as I am trying to do.

```auto

**Sketch Function**

export default function sketch (p) {
  let rotation = 0;
  let img;
  const imgs = []
  p.setup = function () {
    p.createCanvas(600, 400, p.WEBGL);

  };

  p.myCustomRedrawAccordingToNewPropsHandler = function (props) {
    if (props.rotation){
      rotation = props.rotation * Math.PI / 180;
      console.log(rotation)
    }
    if(props.img){
      img = props.img
      console.log(img)
      p.loadImage(img)
    }

  };

  p.draw = function () {

    p.image(img, 10, 10, 50, 50)

    // p.image(img);
    p.background(100);
    p.normalMaterial();
    p.noStroke();
    p.push();
    p.rotateY(rotation);
    p.box(100);
    p.pop();
  };
};

```

---

<div class="post-metadata">

**Author:** ![geli-gel](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@geli-gel](https://discourse.processing.org/u/geli-gel)\
**Post date:** [January 9, 2020, 6:52pm UTC](https://discourse.processing.org/t/react-p5-loading-image-question-how-do-i-pass-prop-values-to-preload-image/16961/2 "2020-01-09T18:52:27Z")

</div>

Hi! I recently made progress on something similar using the p5 react wrapper. I’m wondering what it looks like when you are calling the P5Wrapper component, are you passing in the img like this? `<P5Wrapper sketch={sketch} img={img} />`

I’m wondering if maybe you just have to move the `p.loadImage(img)` line into a `p.preload` function, i think your `img` variable should be available there. I think what happens in `myCustomRedrawAccordingToNewPropsHandler` is only meant to set variables, not do any actual p5 stuff. Hope that helps.

---

<div class="post-metadata">

**Author:** ![eagle3y3z](https://avatars.discourse-cdn.com/v4/letter/e/a698b9/32.png) [@eagle3y3z](https://discourse.processing.org/u/eagle3y3z)\
**Post date:** [January 10, 2020, 12:06am UTC](https://discourse.processing.org/t/react-p5-loading-image-question-how-do-i-pass-prop-values-to-preload-image/16961/3 "2020-01-10T00:06:29Z")

</div>

Yes I tried to set it up similar exactly like that. Unfortunately I can’t insert `p.loadImage(img)` because then img would be undefined cause it should be a dynamic prop value.

---

<div class="post-metadata">

**Author:** ![geli-gel](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@geli-gel](https://discourse.processing.org/u/geli-gel)\
**Post date:** [January 10, 2020, 11:30pm UTC](https://discourse.processing.org/t/react-p5-loading-image-question-how-do-i-pass-prop-values-to-preload-image/16961/4 "2020-01-10T23:30:45Z")

</div>

Sorry about that! Hmm. I have one more idea - from what you said, it sounds like maybe there could be an if statement added into `p.preload`, so that `loadImage` is only called if img has been passed in from the props handler and defined.

---

<div class="post-metadata">

**Author:** ![atoro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/atoro/32/1351_2.png) [@atoro](https://discourse.processing.org/u/atoro)\
**Post date:** [January 25, 2020, 12:15am UTC](https://discourse.processing.org/t/react-p5-loading-image-question-how-do-i-pass-prop-values-to-preload-image/16961/5 "2020-01-25T00:15:20Z")

</div>

@eagle3y3z It is absolutely possible for you to use some of the approaches described in my posts.

Anyway, let’s look on your example:

1. What is the type of `props.img`? I suppose it is a string containing a path/URL to the image?
2. If that’s the case, your code should be something like this:

```auto
let myImageURL = ''
let myImage = null

p.myCustomRedrawAccordingToNewPropsHandler = function (props) {
    if (props.img) {
        myImageURL = props.img
    }
    // else {
    // myImageURL = ''
    // }
}

p.draw = function() {
    if (myImageURL) {
        myImage = p.loadImage(myImageURL, (img) => myImage = img)
        myImageURL = ''
    }
    // else {
    // myImage = null
    // }

    if (myImage) {
        p.image(myImage, 10, 10, 50, 50)
    }
}

```

(The code bellow is one of many possible approaches)

Keep in mind what p5 documentation says:  
“loadImage() - Loads an image from a path and creates a p5.Image from it. The image may not be immediately available for rendering. If you want to ensure that the image is ready before doing anything with it, place the loadImage() call in preload(). You may also supply a callback function to handle the image when it’s ready.”

The important part is: “The image may not be immediately available for rendering.” Loading a image is an asynchronous task, use preload(), or callback function or wrap loadImage() in a JS Promise.

I hope the explanations above will be helpful to you. Good luck!