# \[p5\] loadImage : How to load an image from an internet URL

**URL:** <https://discourse.processing.org/t/p5-loadimage-how-to-load-an-image-from-an-internet-url/42752>\
**Category:** Coding Questions\
**Created:** [September 12, 2023, 11:38pm UTC](https://discourse.processing.org/t/p5-loadimage-how-to-load-an-image-from-an-internet-url/42752 "2023-09-12T23:38:00Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [September 12, 2023, 11:38pm UTC](https://discourse.processing.org/t/p5-loadimage-how-to-load-an-image-from-an-internet-url/42752/1 "2023-09-12T23:38:00Z")

</div>

[p5] loadImage : How to load an image from an internet URL

```auto
let img;
var url ="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
function preload() {
  img = loadImage(url); 
}
function setup() {
  image(img, 0, 0);
}

```

I want to put an image from the internet into one variable.  
(I want to use the ‘loadImage’ function.)  
How should I do it? I wonder.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [September 12, 2023, 11:49pm UTC](https://discourse.processing.org/t/p5-loadimage-how-to-load-an-image-from-an-internet-url/42752/2 "2023-09-12T23:49:09Z")

</div>

Documentation states this:

> Loading an image from a URL or other remote location may be blocked due to your browser’s built-in security.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [September 13, 2023, 12:12am UTC](https://discourse.processing.org/t/p5-loadimage-how-to-load-an-image-from-an-internet-url/42752/3 "2023-09-13T00:12:08Z")

</div>

@svan

thank you for the reply.  
Q1) By any chance, do you operate?  
It doesn’t work for me.  
Q2) So, if it doesn’t work due to security reasons such as the browser, should I say that there is no way within ‘p5’?

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [September 13, 2023, 12:36am UTC](https://discourse.processing.org/t/p5-loadimage-how-to-load-an-image-from-an-internet-url/42752/4 "2023-09-13T00:36:48Z")

</div>

> should I say that there is no way within ‘p5’?

You can add it to index.html:

 ![index](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/1/61f08f39210880725fe0753738b59444540d1657.png)

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [September 13, 2023, 2:53am UTC](https://discourse.processing.org/t/p5-loadimage-how-to-load-an-image-from-an-internet-url/42752/5 "2023-09-13T02:53:06Z")

</div>

@svan

good idea.

p5 WEB,

```auto
var url ="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
let imgs;
function preload() {      
let imgs = createImg(url,"width='8000' height='600'");
    imgs.position(0, 0);       
}
function setup() {

}

```

It can be configured in the same way as above.  
However, I want to change the image size, but I don’t know how.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [September 13, 2023, 3:37am UTC](https://discourse.processing.org/t/p5-loadimage-how-to-load-an-image-from-an-internet-url/42752/6 "2023-09-13T03:37:52Z")

</div>

```auto
  <img src= "https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height = "50" width = "160"/>

```

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [September 13, 2023, 6:01am UTC](https://discourse.processing.org/t/p5-loadimage-how-to-load-an-image-from-an-internet-url/42752/7 "2023-09-13T06:01:42Z")

</div>

@svan  
What you say is correct.  
However, I would like to solve it through ‘createImg’.  
I would like to solve it through ‘p5’.

```auto
var url ="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
let imgs;
function preload() {      
let imgs = createImg("https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
    imgs.style("width : 1000px; height:130px");
    imgs.position(0, 0);       
}
function setup() {

}

```