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

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.


**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();
  };
};

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.

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.

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.