Loading images with require

[arronhunt]

I could be doing something wrong here, but how could I pass images to p5 here?

Component

const myImage = require('./assets/image.png');

render() (
    <P5Wrapper sketch={sketch} image={myImage}/>
)

sketch.js

let image;

p.myCustomRedrawAccordingToNewPropsHandler = function(props) {
    if(props.image) {
        image = props.image;
    }
}

p.draw = function() {
    p.loadImage(image); // p5.js says: It looks like there was a problem loading your image. Try checking if the file path [/static/media/image_1.01b571ff.png] is correct...
}

[jwilso48]

Did you ever figure this out?

[Jack-Wiebe]

HI there, I am struggling with the same issue of passing an image to the p5-wrapper.
Does anyone have a solution to this problem?

[icatstudio]

I think I have found the solution but still working on it tho! Its something along the following lines;

FIRST
import your images into your top most module.

import turnBuddy from '../img/pmini3.png'
import pickBuddy from '../img/pmini2.png'
import robotBuddy from '../img/pmini1.png'

You do not necessarily have to use them in your code, its just for reference purposes for react to correctly build the project with your "images at the correct location".

After build process your images will be located @ [... yourReactDirectory]/build/static/media with some hash like numbers added to their original names.

My pmini2.png file became pmini2.263db811.png after the build. As far as I could observe this renaming process happens once so you wont have to update your references each time a build is executed.

SECOND
Once the react build is complete you may either access these images locally or through some API you might run in the background. I already have an API running for locally serving state data so I just added another route to access images located under the location explained above.

using loadImage() method of p5 I could some how access and touch the images. Loads without an error BUT when I console.log the image; the image array appears to be empty. All the rest attributes including the image size and name data appears to be correct. But the image wont show up!

let address = 'http://127.0.0.1:3000/image/'

let turnBuddy = p5.loadImage(address + '3', () => {
        console.log(turnBuddy)
        p5.image(turnBuddy, 0, 0, 50, 50)
      })

So far my solution ...

[jamesrweb]

I have updated the examples in my fork of this repo to show a workaround for loading images, feel free to check the example there and hopefully it helps in the future. I will be aiming to look into the types library more because it is missing modules like p5.sound also, as discussed in #11.

[jamesrweb]

Closing due to inactivity.