p5.js Image Not Showing

Question

So I was making an image editing app with p5.js. I uploaded an image to postimages.org (imgur wasn't working). It actually loads the image (I have seen in network tab) but I can't see it. here's the link: https://i.postimg.cc/d3N4VF2G/npestastare.png here's my html code:

<h1>Image Editor</h1>
        <main class="hidden"></main>
        <div id="load">
            <p>Load Image:</p>
            <input type="text" id="file" placeholder="image link" />
            <button onclick="imageLoaded()">Load</button>
        </div>
        <div id="editor-shapes" class="flex"></div>
        <div id="editor-metadata" class="flex"></div>
        <div id="editor-color" class="flex">
            <input type="color" id="col1" /><input type="color" id="col2" />
        </div>

here's my js code:

function setup() {
    createCanvas(400, 400)
}

function draw() {}

function imageLoaded() {
    document.querySelector('main').classList.remove('hidden')
    document.querySelector('#load').classList.add('hidden')
    const img = loadImage(document.querySelector('#file').value)
    console.log(img)
    image(img, 0, 0, 400, 400)
}

Answer 1

You're trying to render the image before it is actually loaded. You should put the image call in the successCallback parameter of the image function.

function imageLoaded() {
    document.querySelector('main').classList.remove('hidden')
    document.querySelector('#load').classList.add('hidden')
    const url = document.querySelector('#file').value;
    loadImage(url, (img) => image(img, 0, 0, 400, 400));
}