Reference loadImage()

loadImage()

Loads an image to create a p5.Image object.

loadImage() interprets the first parameter one of three ways. If the path to an image file is provided, loadImage() will load it. Paths to local files should be relative, such as '/assets/thundercat.jpg'. URLs such as 'https://example.com/thundercat.jpg' may be blocked due to browser security. Raw image data can also be passed as a base64 encoded image in the form 'data:image/png;base64,arandomsequenceofcharacters'. The path parameter can also be defined as a Request object for more advanced usage.

The second parameter is optional. If a function is passed, it will be called once the image has loaded. The callback function can optionally use the new p5.Image object. The return value of the function will be used as the final return value of loadImage().

The third parameter is also optional. If a function is passed, it will be called if the image fails to load. The callback function can optionally use the event error. The return value of the function will be used as the final return value of loadImage().

This function returns a Promise and should be used in an async setup with await. See the examples for the usage syntax.

Examples

Syntax

loadImage(path, [successCallback], [failureCallback])

Parameters

path
String|Request: path of the image to be loaded or base64 encoded image.
successCallback
function(p5.Image): function called with p5.Image once it loads.
failureCallback
function(Event): function called with event error if the image fails to load.

Returns

Promise<p5.Image>: the p5.Image object.
Notice any errors or typos? Please let us know. Please feel free to edit src/image/loading_displaying.js and open a pull request!

Related References