gpui: Improve img element to support load from Assets (#15482)

Release Notes:

- N/A


Currently, the `img` element provided by GPUI only supports FilePath or
URL, but in actual applications we need to let `img` load an image
embedded in Assets.

The `svg` element can currently support this, but `img` cannot.

For example:

We have such an Assets directory:

```
assets
|- icons
|- images
|--- foo.png
```

```rs
// If give a path, considered an Asset
img("images/foo.png");
// If give a URI, considered a Remote image
img("https://foo.bar/images/foo.png");
// If give a PathBuf, considered a Local file
img(PathBuf::from("path/to/foo.png"));
```


## Example test

```
cargo run -p gpui --example image 
```

<img width="827" alt="image"
src="https://github.com/user-attachments/assets/e45dcf7f-4626-4fb0-aca9-9b6e1045a952">

---------

Co-authored-by: Marshall Bowers <elliott.codes@gmail.com>

crates/gpui/examples/image/image.rs

@@ -3,6 +3,34 @@ use std::str::FromStr;
 use std::sync::Arc;
 
 use gpui::*;
+use std::fs;
+
+struct Assets {
+    base: PathBuf,
+}
+
+impl AssetSource for Assets {
+    fn load(&self, path: &str) -> Result<Option<std::borrow::Cow<'static, [u8]>>> {
+        fs::read(self.base.join(path))
+            .map(|data| Some(std::borrow::Cow::Owned(data)))
+            .map_err(|e| e.into())
+    }
+
+    fn list(&self, path: &str) -> Result<Vec<SharedString>> {
+        fs::read_dir(self.base.join(path))
+            .map(|entries| {
+                entries
+                    .filter_map(|entry| {
+                        entry
+                            .ok()
+                            .and_then(|entry| entry.file_name().into_string().ok())
+                            .map(SharedString::from)
+                    })
+                    .collect()
+            })
+            .map_err(|e| e.into())
+    }
+}
 
 #[derive(IntoElement)]
 struct ImageContainer {
@@ -27,7 +55,7 @@ impl RenderOnce for ImageContainer {
                 .size_full()
                 .gap_4()
                 .child(self.text)
-                .child(img(self.src).w(px(512.0)).h(px(512.0))),
+                .child(img(self.src).w(px(256.0)).h(px(256.0))),
         )
     }
 }
@@ -35,6 +63,7 @@ impl RenderOnce for ImageContainer {
 struct ImageShowcase {
     local_resource: Arc<PathBuf>,
     remote_resource: SharedUri,
+    asset_resource: SharedString,
 }
 
 impl Render for ImageShowcase {
@@ -55,6 +84,10 @@ impl Render for ImageShowcase {
                 "Image loaded from a remote resource",
                 self.remote_resource.clone(),
             ))
+            .child(ImageContainer::new(
+                "Image loaded from an asset",
+                self.asset_resource.clone(),
+            ))
     }
 }
 
@@ -63,37 +96,44 @@ actions!(image, [Quit]);
 fn main() {
     env_logger::init();
 
-    App::new().run(|cx: &mut AppContext| {
+    App::new()
-        cx.activate(true);
+        .with_assets(Assets {
-        cx.on_action(|_: &Quit, cx| cx.quit());
+            base: PathBuf::from("crates/gpui/examples"),
-        cx.bind_keys([KeyBinding::new("cmd-q", Quit, None)]);
-        cx.set_menus(vec![Menu {
-            name: "Image".into(),
-            items: vec![MenuItem::action("Quit", Quit)],
-        }]);
-
-        let window_options = WindowOptions {
-            titlebar: Some(TitlebarOptions {
-                title: Some(SharedString::from("Image Example")),
-                appears_transparent: false,
-                ..Default::default()
-            }),
-
-            window_bounds: Some(WindowBounds::Windowed(Bounds {
-                size: size(px(1100.), px(600.)),
-                origin: Point::new(px(200.), px(200.)),
-            })),
-
-            ..Default::default()
-        };
-
-        cx.open_window(window_options, |cx| {
-            cx.new_view(|_cx| ImageShowcase {
-                // Relative path to your root project path
-                local_resource: Arc::new(PathBuf::from_str("examples/image/app-icon.png").unwrap()),
-                remote_resource: "https://picsum.photos/512/512".into(),
-            })
         })
-        .unwrap();
+        .run(|cx: &mut AppContext| {
-    });
+            cx.activate(true);
+            cx.on_action(|_: &Quit, cx| cx.quit());
+            cx.bind_keys([KeyBinding::new("cmd-q", Quit, None)]);
+            cx.set_menus(vec![Menu {
+                name: "Image".into(),
+                items: vec![MenuItem::action("Quit", Quit)],
+            }]);
+
+            let window_options = WindowOptions {
+                titlebar: Some(TitlebarOptions {
+                    title: Some(SharedString::from("Image Example")),
+                    appears_transparent: false,
+                    ..Default::default()
+                }),
+
+                window_bounds: Some(WindowBounds::Windowed(Bounds {
+                    size: size(px(1100.), px(600.)),
+                    origin: Point::new(px(200.), px(200.)),
+                })),
+
+                ..Default::default()
+            };
+
+            cx.open_window(window_options, |cx| {
+                cx.new_view(|_cx| ImageShowcase {
+                    // Relative path to your root project path
+                    local_resource: Arc::new(
+                        PathBuf::from_str("crates/gpui/examples/image/app-icon.png").unwrap(),
+                    ),
+                    remote_resource: "https://picsum.photos/512/512".into(),
+                    asset_resource: "image/app-icon.png".into(),
+                })
+            })
+            .unwrap();
+        });
 }

crates/gpui/src/asset_cache.rs

@@ -1,4 +1,4 @@
-use crate::{SharedUri, WindowContext};
+use crate::{SharedString, SharedUri, WindowContext};
 use collections::FxHashMap;
 use futures::Future;
 use parking_lot::Mutex;
@@ -11,6 +11,7 @@ use std::{any::Any, path::PathBuf};
 pub(crate) enum UriOrPath {
     Uri(SharedUri),
     Path(Arc<PathBuf>),
+    Asset(SharedString),
 }
 
 impl From<SharedUri> for UriOrPath {

crates/gpui/src/elements/img.rs

@@ -1,8 +1,8 @@
 use crate::{
     point, px, size, AbsoluteLength, Asset, Bounds, DefiniteLength, DevicePixels, Element,
     ElementId, GlobalElementId, Hitbox, ImageData, InteractiveElement, Interactivity, IntoElement,
-    LayoutId, Length, Pixels, SharedUri, Size, StyleRefinement, Styled, SvgSize, UriOrPath,
+    LayoutId, Length, Pixels, SharedString, SharedUri, Size, StyleRefinement, Styled, SvgSize,
-    WindowContext,
+    UriOrPath, WindowContext,
 };
 use futures::{AsyncReadExt, Future};
 use http_client;
@@ -31,12 +31,18 @@ pub enum ImageSource {
     File(Arc<PathBuf>),
     /// Cached image data
     Data(Arc<ImageData>),
+    /// Image content will be loaded from Asset at render time.
+    Asset(SharedString),
     // TODO: move surface definitions into mac platform module
     /// A CoreVideo image buffer
     #[cfg(target_os = "macos")]
     Surface(CVImageBuffer),
 }
 
+fn is_uri(uri: &str) -> bool {
+    uri.contains("://")
+}
+
 impl From<SharedUri> for ImageSource {
     fn from(value: SharedUri) -> Self {
         Self::Uri(value)
@@ -44,14 +50,32 @@ impl From<SharedUri> for ImageSource {
 }
 
 impl From<&'static str> for ImageSource {
-    fn from(uri: &'static str) -> Self {
+    fn from(s: &'static str) -> Self {
-        Self::Uri(uri.into())
+        if is_uri(&s) {
+            Self::Uri(s.into())
+        } else {
+            Self::Asset(s.into())
+        }
     }
 }
 
 impl From<String> for ImageSource {
-    fn from(uri: String) -> Self {
+    fn from(s: String) -> Self {
-        Self::Uri(uri.into())
+        if is_uri(&s) {
+            Self::Uri(s.into())
+        } else {
+            Self::Asset(s.into())
+        }
+    }
+}
+
+impl From<SharedString> for ImageSource {
+    fn from(s: SharedString) -> Self {
+        if is_uri(&s) {
+            Self::Uri(s.into())
+        } else {
+            Self::Asset(s)
+        }
     }
 }
 
@@ -388,10 +412,11 @@ impl InteractiveElement for Img {
 impl ImageSource {
     fn data(&self, cx: &mut WindowContext) -> Option<Arc<ImageData>> {
         match self {
-            ImageSource::Uri(_) | ImageSource::File(_) => {
+            ImageSource::Uri(_) | ImageSource::Asset(_) | ImageSource::File(_) => {
                 let uri_or_path: UriOrPath = match self {
                     ImageSource::Uri(uri) => uri.clone().into(),
                     ImageSource::File(path) => path.clone().into(),
+                    ImageSource::Asset(path) => UriOrPath::Asset(path.clone()),
                     _ => unreachable!(),
                 };
 
@@ -419,6 +444,7 @@ impl Asset for Image {
         let client = cx.http_client();
         let scale_factor = cx.scale_factor();
         let svg_renderer = cx.svg_renderer();
+        let asset_source = cx.asset_source().clone();
         async move {
             let bytes = match source.clone() {
                 UriOrPath::Path(uri) => fs::read(uri.as_ref())?,
@@ -435,6 +461,16 @@ impl Asset for Image {
                     }
                     body
                 }
+                UriOrPath::Asset(path) => {
+                    let data = asset_source.load(&path).ok().flatten();
+                    if let Some(data) = data {
+                        data.to_vec()
+                    } else {
+                        return Err(ImageCacheError::Asset(
+                            format!("not found: {}", path).into(),
+                        ));
+                    }
+                }
             };
 
             let data = if let Ok(format) = image::guess_format(&bytes) {
@@ -502,6 +538,9 @@ pub enum ImageCacheError {
         /// The HTTP response body.
         body: String,
     },
+    /// An error that occurred while processing an asset.
+    #[error("asset error: {0}")]
+    Asset(SharedString),
     /// An error that occurred while processing an image.
     #[error("image error: {0}")]
     Image(Arc<ImageError>),