# How to combine React and P5.js? (loading image)

**URL:** <https://discourse.processing.org/t/how-to-combine-react-and-p5-js-loading-image/38877>\
**Category:** Libraries\
**Created:** [September 20, 2022, 12:16pm UTC](https://discourse.processing.org/t/how-to-combine-react-and-p5-js-loading-image/38877 "2022-09-20T12:16:37Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mangelo](https://avatars.discourse-cdn.com/v4/letter/m/74df32/32.png) [@Mangelo](https://discourse.processing.org/u/Mangelo)\
**Post date:** [September 20, 2022, 12:16pm UTC](https://discourse.processing.org/t/how-to-combine-react-and-p5-js-loading-image/38877/1 "2022-09-20T12:16:37Z")

</div>

Hi! I am currently learning P5.js, and I’m planning on using it with my personal portfolio.  
I managed to do what I want in p5.js, however, when I try to import it to my react project i’m not able to do it.

This is what i’m trying to do. I’m trying to use this [npm package](https://www.npmjs.com/package/react-p5)

I’m having trouble loading the images. How would I go about doing that?

```auto
import React from "react";
import Sketch from "react-p5";

   let x = 50;
   let y = 50;

let imgURL = './Ellipse1.png'
let img; 

export default (props) => {
   const setup = (p5, canvasParentRef) => {

   img = p5.loadImage(imgURL)
   	// use parent to render the canvas in this ref
   	// (without that p5 will render the canvas outside of your component)
   	p5.createCanvas(500, 500).parent(canvasParentRef);
   };

   const draw = (p5) => {
   	p5.background(0);
   	p5.ellipse(x, y, 70, 70);
   p5.image(img,10,10)
   	// NOTE: Do not use setState in the draw function or in functions that are executed
   	// in the draw function...
   	// please use normal variables or class properties for these purposes
   	x++;
   };

   return <Sketch setup={setup} draw={draw} />;
};

```

 ![Landing Page](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/b/6b80cc04f7b9362311c0a566abbb321bfc16e761.jpeg)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 20, 2022, 3:44pm UTC](https://discourse.processing.org/t/how-to-combine-react-and-p5-js-loading-image/38877/2 "2022-09-20T15:44:58Z")

</div>

Hi @Mangelo,

Your issue is more related to how paths are handled and used with your [**module bundler**](https://lihautan.com/what-is-module-bundler-and-how-does-it-work/).

If you are using `create-react-app`, it probably uses [Webpack](https://webpack.js.org/) which allows you to build and compile your React application into .html/js/css files with external ressources like images or videos…

When you use `react-scripts build`, it builds your application in a `build` folder and replaces links to your images my special hashed name:

> **[Asset Management | webpack](https://webpack.js.org/guides/asset-management/#loading-images)**
>
> webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

So you want to follow the documentation on how to import images:

> **[Adding Images, Fonts, and Files | Create React App](https://create-react-app.dev/docs/adding-images-fonts-and-files/)**
>
> With webpack, using static assets like images and fonts works similarly to CSS.

```auto
import imgURL from "./Ellipse1.png"

// ...

img = p5.loadImage(imgURL);

```