# How to upload an image from a URL?

**URL:** <https://discourse.processing.org/t/how-to-upload-an-image-from-a-url/16020>\
**Category:** Beginners\
**Created:** [December 1, 2019, 8:17pm UTC](https://discourse.processing.org/t/how-to-upload-an-image-from-a-url/16020 "2019-12-01T20:17:08Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![willianxz](https://avatars.discourse-cdn.com/v4/letter/w/a8b319/32.png) [@willianxz](https://discourse.processing.org/u/willianxz)\
**Post date:** [December 1, 2019, 8:17pm UTC](https://discourse.processing.org/t/how-to-upload-an-image-from-a-url/16020/1 "2019-12-01T20:17:08Z")

</div>

Hi, I tried to upload an image from a URL, but from what I see it doesn’t work, only for images that I place locally.

The purpose of uploading images using URL is because in the JSON I receive it contains their URL.

Example:

```auto
let img;

function preload () {
  img = 'https://digimon.shadowsmith.com/img/koromon.jpg';
}
function setup () {
   createCanvas (400, 400);
   image (img, 0, 0, width, height);
}

function draw () {
   background (220);
}

```

This produces the error:

> Uncaught TypeError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type ‘(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)’ (sketch: line 8)

The image command (img, 0, 0, width, height) should accept the URL parameter as well, not just local referencing.

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [December 1, 2019, 8:23pm UTC](https://discourse.processing.org/t/how-to-upload-an-image-from-a-url/16020/2 "2019-12-01T20:23:10Z")

</div>

You‘re not setting the img variable correctly. You have to either use loadImage(URL) or createImage(URL).

The image() accepts image data, which can be any of the types mentioned in the error, but that‘s not what you‘re providing.

---

<div class="post-metadata">

**Author:** ![willianxz](https://avatars.discourse-cdn.com/v4/letter/w/a8b319/32.png) [@willianxz](https://discourse.processing.org/u/willianxz)\
**Post date:** [December 2, 2019, 2:36am UTC](https://discourse.processing.org/t/how-to-upload-an-image-from-a-url/16020/3 "2019-12-02T02:36:47Z")

</div>

Using with LoadImage also ends up giving an error:

```auto
let img;
function preload () {
img = loadImage ('https://digimon.shadowsmith.com/img/koromon.jpg');
}

function setup () {
createCanvas (400, 400);
image (img, 0, 0, width, height);
}

function draw () {
background (220);
}

```

The error that da is this:

> p5.js says: It looks like there was a problem loading your image. Try checking if the file path [[https://digimon.shadowsmith.com/img/koromon.jpg](https://digimon.shadowsmith.com/img/koromon.jpg)] is correct, hosting the image online, or running a local server. [[Https://github.com/processing/p5](Https://github.com/processing/p5). js / wiki / Local-server]  
> Event {isTrusted: true, constructor: Object}

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 2, 2019, 2:46am UTC](https://discourse.processing.org/t/how-to-upload-an-image-from-a-url/16020/4 "2019-12-02T02:46:23Z")

</div>

i had problems to load it in my browser.  
so better:

- download it to your PC
- upload it to your project
- link to the file ( in preload )

[https://editor.p5js.org/kll/sketches/JuGdFxtgh](https://editor.p5js.org/kll/sketches/JuGdFxtgh)

---

<div class="post-metadata">

**Author:** ![willianxz](https://avatars.discourse-cdn.com/v4/letter/w/a8b319/32.png) [@willianxz](https://discourse.processing.org/u/willianxz)\
**Post date:** [December 2, 2019, 10:37am UTC](https://discourse.processing.org/t/how-to-upload-an-image-from-a-url/16020/5 "2019-12-02T10:37:42Z")

</div>

Hello friend, this way it works smoothly, but that’s not what I want.  
I want to upload the image with just the URL, not using it locally … why do I want this ??, why do I get the URL path via JSON, so I need it to work with the URL.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 2, 2019, 10:45am UTC](https://discourse.processing.org/t/how-to-upload-an-image-from-a-url/16020/6 "2019-12-02T10:45:22Z")

</div>

to load after setup… try the  
[https://p5js.org/reference/#/p5/loadImage](https://p5js.org/reference/#/p5/loadImage)  
with the callback

### Syntax

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

```

example ( but does not help ) see link above, modified version

---

<div class="post-metadata">

**Author:** ![willianxz](https://avatars.discourse-cdn.com/v4/letter/w/a8b319/32.png) [@willianxz](https://discourse.processing.org/u/willianxz)\
**Post date:** [December 2, 2019, 11:14am UTC](https://discourse.processing.org/t/how-to-upload-an-image-from-a-url/16020/7 "2019-12-02T11:14:29Z")

</div>

Using it that way doesn’t work either.  
And the problem is not the image, why using another of the same. I’m starting to believe this is an uncataloged bug.

```auto
let img;
function setup () {
  createCanvas (400, 400);
  loadImage('https://digimon.shadowsmith.com/img/koromon.jpg', img => {
    image(img, 0, 0, width, height);
  });
}

function draw () {
  background (220);
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 2, 2019, 11:19am UTC](https://discourse.processing.org/t/how-to-upload-an-image-from-a-url/16020/8 "2019-12-02T11:19:00Z")

</div>

look in your inspect console  
( i am on win 10 / browser firefox )

```auto
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://digimon.shadowsmith.com/img/koromon.jpg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

```

and search here the forum about that

---

<div class="post-metadata">

**Author:** ![willianxz](https://avatars.discourse-cdn.com/v4/letter/w/a8b319/32.png) [@willianxz](https://discourse.processing.org/u/willianxz)\
**Post date:** [December 2, 2019, 11:24am UTC](https://discourse.processing.org/t/how-to-upload-an-image-from-a-url/16020/9 "2019-12-02T11:24:43Z")

</div>

I installed the chrome allow cors extension, now this code worked above.

I had forgotten about this part of cors, these browsers of today …  
Thank you my friend, now we will be able to display images coming from API.