How can I force new img elements? | Dioxus Labs | Page 1

In my app I'm using a component like the following:

#[component]
fn App() -> Element {
    const LHS: &str = "someImgUrlHere";
    const RHS: &str = "anotherImgUrlHere";

    let mut left = use_signal(|| true);
    let src = if left() { LHS } else { RHS };
    let pos = if left() { 0 } else { 400 };
    rsx! {
        img {
            key: "{src}",
            style: "position: absolute; left: {pos}px;",
            src,
            onclick: move |_| left.set(!left()),
        }
    }
}

I would expect to see one image on the left and the other image on the right, but instead I see the image on the left briefly flash on the right. I think what's happening is that Dioxus is updating the attributes on the existing image element instead of creating a new element. The browser can immediately render the style change, but it takes a moment to render the src change. Is there a way to force Dioxus to diff less and just recreate the entire img element?

#How can I force new img elements?