mcmonkeyprojects / sd-infinity-grid-generator-script

Infinite-Axis Grid Generator for Stable Diffusion!
MIT License
182 stars 25 forks source link

The width/height attributes set on the placeholder.png images aren't removed when the actual image loads #69

Closed skfoo closed 1 year ago

skfoo commented 1 year ago

While a grid is generating, you can view the index.html and watch the images load as each one is generated. For each unavailable image it sets the src to 'placeholder.png' and adds width/height attributes to match the smallest (I think) width/height used in the row. The problem is that It doesn't remove the width/height attributes from the img when the actual thing loads.

This means that if one of the row's items had a shorter height than the rest (it's a square), everything else that gets loaded in the row will be show up with the wrong aspect ratio (forced to fit into a square).

The width/height attributes are only added when the src is set to placeholder.png, so it looks like this can just be fixed by updating proc.js' checkForUpdates(), adding

img.removeAttribute('width');
img.removeAttribute('height');

before it changes the src property of the img.

Edit: This also has to be fixed when 'auto-scale images to viewport width' is on.

mcmonkey4eva commented 1 year ago

Good report - replicated the issue, and confirmed the suggested fix works. Thank you!