[REF-2810] Error: img is a self-closing tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

[masenf]

Describe the bug When a user makes a simple mistake, and passes the image src as a child, this causes a browser error.

Instead Reflex should catch this at compile time and throw an actionable error in the terminal, or just assume what the user meant and apply the child as the src

To Reproduce

rx.image("/landing/hero.webp", alt="Reflex Logo", width="100%", height="auto"),

OOOPS, meant to write it as

rx.image(src="/landing/hero.webp", alt="Reflex Logo", width="100%", height="auto"),

Screenshots Poor user experience 😭

Specifics (please complete the following information):

• Python Version: 3.11.8
• Reflex Version: 0.5.0a1
• OS: macOS 14
• Browser (Optional): Chrome

_{From SyncLinear.com | REF-2810}

[Yummy-Yums]

@masenf i tried accessing the first args assuming the user forgot to pass in the src attribute but getting an empty list. i think it stops compiling after the error is thrown . unless otherwise, it'd be best to throw an actionable error in the terminal as you suggested

[masenf]

@Yummy-Yums i think you would want to override the create classmethod instead of __init__.

It's the call to super.__init__ that's triggering the exception, so if you call that before your logic, then the exception will be raised before you get a chance to do anything.

[Yummy-Yums]

@masenf applying the child as src still throws a browser error but works fine in the backend , so i guess throwing the TypeError in the else block for user to handle is a better option. is this fine?

[masenf]

in the else block, why not

return super().create(src=children[0], **props)

[masenf]

Fixed via #3307