al.Image: Image is not centered when png is loaded from file

[slussinator]

I am trying to load an image into my experiment. It is not shown in center and I can't figure out how to get it into the correct position. The problem does not seem to occur when loading pictures via url. Thus I cannot produce it here. I have hashed out the line of code where I try to load the picture from file.

Thanks in advance!

import alfred3 as al
exp = al.Experiment()

@exp.member
class Demo(al.Section):
    name = "demo1"

    def on_exp_access(self):
        #image = al.Image(path="files/Qpic.png")
        image=al.Image(url="https://upload.wikimedia.org/wikipedia/commons/3/31/Aicp_homescreen.bitflip_glitch_art.rerender.png")
        intro = al.Page(name="intro_demo", title="demo")
        intro += al.Text("intro text")
        intro += image
        self += intro

if __name__ == "__main__":
    exp.run()

[ctreffe]

Just to be clear, images that are loaded from an URL are displayed centered per default, and pictures loaded from disk are aligned to the left side of the page?

[slussinator]

seems like it. I don't believe it is meant to be this way though. Also, position = "center" does not solve the problem.

[ctreffe]

You're right, the alignment of an Image element should not depend on whether it is loaded from an URL or from disk and we'll look into that.

In the meantime, the position argument should only have an effect on the alignment when used in combination with width = "full" (see the documentation on this) so you might want to try again with this additional argument. The position argument might just work for you, after all.

[slussinator]

adding width and position does not have an effect

[ctreffe]

Okay, this issue might be similar to #213 and we will try to fix both issues in the next version.

[jobrachem]

The argument position should only have an effect, when width is not full, as is stated in the documentation. I would expect the align argument to be the one that controls whether content within an element is displayed centered.

That said, it's of course still odd that images loaded from urls and from files are displayed differently. We'll have to look into that.

[ctreffe]

Ah, my bad... 😄

@jobrachem is right, of course.

[slussinator]

align = "center" solved the problem! Thanks :D

[jobrachem]

I tested the issue in Safari, Chrome and Firefox, and cannot replicate different alignment for images loaded from URLs or from the file system. Both are left aligned by default, as stated in the docs.