P5.js: Using AUTO with p5.element.size() sets width or height to 0, rather than "auto"

[catarak]

Nature of issue?

• [X] Found a bug
• [ ] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [X] Other (specify if possible) DOM

Which platform were you using when you encountered this?

• [ ] Mobile/Tablet (touch devices)
• [X] Desktop/Laptop
• [ ] Others (specify if possible)

Details about the bug:

• p5.js version: 0.7.2
• Web browser and version: Chrome 69.0.3497.100
• Operating System: MacOSX 10.13.4
• Steps to reproduce this:
  

The image is rendering with no height, with the height set to AUTO in the following code:

function setup() {
  noCanvas();
  const url = 'https://dog.ceo/api/breeds/image/random';
  loadJSON(url, processData);
}

function processData(data) {
  print(data.message);
  let img = createImg(data.message);
  img.size(500, AUTO);
}

If I look at the DOM, the <img> was appended with aheight of "0":

If I manually change the height to "auto" by editing the DOM, it works as expected.

I also tried changing AUTO to the String "auto", and I see the same behavior.

[LakshSingla]

I am unable to find the function size in the code. Can you please point it out as I think the issue lies there. ( PS: resize function works well with string property like auto)

[Ajayneethikannan]

I would like to work on this issue !

[Ajayneethikannan]

I tried to fix the issue and this is what I came up with:
Whenever we use the createImg function to create the image with the given data, the corresponding height and width of the image are initially set to 0, before the image has finished loading by the browser.
So when we attempt to calculate the automatic height or width, the calculation results in NaN.

[Ajayneethikannan]

As I was going through the docs, I noticed that createImg function had a callback parameter,called after the image has loaded , and I believe that the correct way to call the methods on the image object would be to call it inside the callback function.
so changing this code :

let img = createImg(data.message); img.size(500, AUTO);

to:

let img = createImg(data.message, () => img.size(500, AUTO));

would resolve the size issue.

@catarak , please verify if this is a sufficient solution ,
thank you !

[lmccart]

@Ajayneethikannan this is the correct solution. so the code is working properly. however, it would be helpful to have some documentation to make this clear. I would suggest we update the documentation for the AUTO constant, right now it is very empty. we could include your code above as an example on that page of how to use it.

[Ajayneethikannan]

Sounds great to me !

[lmccart]

fixed with https://github.com/processing/p5.js/pull/3481