inline_image/
inline_image.rs

1//! Demonstrates how to display images inline with text.
2
3use bevy::prelude::*;
4
5fn main() {
6    let mut app = App::new();
7    app.add_plugins(DefaultPlugins).add_systems(Startup, setup);
8    app.run();
9}
10
11fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
12    commands.spawn(Camera2d);
13    commands.spawn((
14        Text::new("[Text]"),
15        TextFont::from_font_size(px(40.)),
16        Node {
17            margin: px(25).all(),
18            justify_self: JustifySelf::Center,
19            align_self: AlignSelf::Center,
20            ..default()
21        },
22        BackgroundColor(bevy::color::palettes::css::MAROON.into()),
23        Outline {
24            width: px(2),
25            ..default()
26        },
27        children![
28            (
29                TextSpan::new("[span before image]"),
30                TextFont::from_font_size(px(40)),
31            ),
32            (InlineImage {
33                color: bevy::color::palettes::css::RED.into(),
34                image: asset_server.load("branding/bevy_logo_dark.png"),
35                height: Some(30.),
36                ..default()
37            },),
38            (
39                TextSpan::new("[span between images]"),
40                TextFont::from_font_size(px(40.)),
41            ),
42            (InlineImage {
43                color: bevy::color::palettes::css::YELLOW.into(),
44                image: asset_server.load("branding/bevy_bird_dark.png"),
45                width: Some(30.),
46                ..default()
47            },),
48            (
49                TextSpan::new("[span after image]"),
50                TextFont::from_font_size(px(40.)),
51            ),
52        ],
53    ));
54}
inline_image/inline_image.rs

inline_image/
inline_image.rs
