trouble loading image: url for absolute path is added together twice

[kjhollen]

Nature of issue?

• Found a bug

Details about the bug:

A student worked on this sketch and the first image, "start.jpg" doesn't load.
https://editor.p5js.org/laylaomalley/sketches/mFsAhoXLh

And here's a smaller sketch I made from a duplicate, but that still reproduces the behavior:
https://editor.p5js.org/kjhollen/sketches/hznIcfPXQ

Error message says:

p5.js says: It looks like there was a problem loading your image. Try checking if the file path [https://assets.editor.p5js.org/5e81fcca8a9db500200e4708/0275dc62-21a9-4548-bee7-cc774fc1de2https://assets.editor.p5js.org/5e81fcca8a9db500200e4708/54bbeec9-6e80-4b72-a5cf-fce051c1c0bd.jpg] is correct, hosting the image online, or running a local server.[https://github.com/processing/p5.js/wiki/Local-server]

so it appears that two image paths have been concatenated into one. In the same sketch, I can make the issue go away if I get rid of either variable + the related comment in preload (both work in isolation). I tried to reproduce this in a fresh, new sketch of my own with a 'start.jpg' and '1.jpg' but it seems ok. Hope there's enough info in the original sketch to track it down—let me know if there are more details I can provide to help figure this one out.

It was a huge help to use the editor for online teaching this past quarter. Thanks for everything you do.

[catarak]

Thanks for reporting! I have seen a similar issue come up before, as reported in #1205, but this seems to be a little bit different.

[chung-ken]

Hi. I'm also a teacher. Did your student get this working?
I'm curious about the original image file. I would have them try another (similar) image file to see if they can get it working.

[dhoizner]

One of the problems here is that the url for start.jpg ends in a 1.jpg, which is the name of the second file 🙊 (see below), - this means that when the value for 1.jpg is being resolved, it gets appended into the url for start.jpg rather in the correct place. Will continue looking at this tomorrow :).

let introImg, city1Img;

function preload() {
  introImg = loadImage('https://assets.editor.p5js.org/5e81fcca8a9db500200e4708/0275dc62-21a9-4548-bee7-cc774fc1de21.jpg');
  //city1Img = loadImage('1.jpg');
}

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(introImg);
}

[kjhollen]

Wow, great find!

[chung-ken]

Dan, that was a really interesting find. When I changed the "#.jpg" names to "pic#.jpg" - leaving start.jpg alone, the initial image loaded. How do you access the actual path for each picture/asset?

…

On Thu, Jun 25, 2020 at 10:36 AM kate hollenbach ***@***.***> wrote: Wow, great find! — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1463 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AP7TXF35XLP6NEK3MQVNGXDRYNOHVANCNFSM4OBATDUQ> .

[dhoizner]

Dan, that was a really interesting find. When I changed the "#.jpg" names to "pic#.jpg" - leaving start.jpg alone, the initial image loaded. How do you access the actual path for each picture/asset?
…

Hi @chung-ken, if you look at the page source after you run your sketch, you'll see your sketch javascript in the tag for <iframe id="canvas_frame".../> with the urls for loadImage interpolated from the asset name to the url. it doesn't seem like there's an easier way in the UI.