Fix the logo image in the "ui" UI example

examples/ui/ui.rs

@@ -270,19 +270,37 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 })
                 .with_children(|parent| {
                     // bevy logo (image)
-
+                    // A `NodeBundle` is used to display the logo the image as an `ImageBundle` can't automatically
+                    // size itself with a child node present.
                     parent
-                        .spawn(ImageBundle {
-                            style: Style {
-                                width: Val::Px(500.0),
+                        .spawn((
+                            NodeBundle {
+                                style: Style {
+                                    width: Val::Px(500.0),
+                                    height: Val::Px(125.0),
+                                    margin: UiRect::top(Val::VMin(5.)),
+                                    ..default()
+                                },
+                                // a `NodeBundle` is transparent by default, so to see the image we have to its color to `WHITE`
+                                background_color: Color::WHITE.into(),
                                 ..default()
                             },
-                            ..default()
-                        })
+                            UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")),
+                        ))
                         .with_children(|parent| {
                             // alt text
-                            parent
-                                .spawn(TextBundle::from_section("Bevy logo", TextStyle::default()));
+                            // This UI node takes up no space in the layout and the `Text` component is used by the accessiblity module
+                            // and is not rendered.
+                            parent.spawn((
+                                NodeBundle {
+                                    style: Style {
+                                        display: Display::None,
+                                        ..Default::default()
+                                    },
+                                    ..Default::default()
+                                },
+                                Text::from_section("Bevy logo", TextStyle::default()),
+                            ));
                         });
                 });
         });