Kernel Components

`ftd.image`

Docs

Book 🚧

Learn

Why Use `fastn` for Your Next Frontend?

Container Root Attributes

`import`

Using export/exposing

Functions

Built-in Functions

Built-in Rive Functions

Built-in Variables

`ftd` Events

Rive Events

Use color scheme package

How to make page responsive

Using JS

JS in function

Web Component

Create `fastn` package

Same argument & attribute types

`ftd.image`

`ftd.image` is the kernel element used to render images in `ftd`.

Usage

Input

-- import: fastn.com/assets

-- ftd.image:
src: $assets.files.images.cs.show-cs-1.jpg

Lang:

ftd

Output

Attributes

`ftd.image` accepts the below attributes as well all the [common attributes](ftd/common/).

`src`

Type: [`ftd.image-src`](ftd/built-in-types/#ftd-image-src) Required: True The `src` attribute specifies the path to the image to display. This is the only required attribute. `src` stores image URLs for both light and dark mode.

Example Using `ftd.image-src` Variable

Consider the following example:

Two images using `ftd.image-src` type variable

-- ftd.image-src my-images:
light: https://fastn.com/-/fastn.com/images/cs/show-cs-1.jpg
dark: https://fastn.com/-/fastn.com/images/cs/show-cs-1-dark.jpg

-- ftd.image:
src: $my-images
width.fixed.px: 200
height.fixed.px: 115

Lang:

ftd

Output: Two images using `ftd.image-src` type variable

Switch your color mode (light/dark) using the floating toolbar icon on the bottom right and see the image changing. In this example, the image URL `https://fastn.com/-/fastn.com/images/cs/show-cs-1.jpg` is used in the light mode, and `https://fastn.com/-/fastn.com/images/cs/show-cs-1-dark.jpg` is used in dark mode. It is also possible to use `ftd.image-src` with only one field. For example:

One image using `ftd.image-src` type variable

-- ftd.image-src just-light:
light: https://fastn.com/-/fastn.com/images/cs/show-cs-1.jpg

;; or

-- ftd.image-src just-light: https://fastn.com/-/fastn.com/images/cs/show-cs-1.jpg

-- ftd.image:
src: $just-light
width.fixed.px: 200
height.fixed.px: 115

Lang:

ftd

Output: One image using `ftd.image-src` type variable

In this case, the same image URL https://fastn.com/-/fastn.com/images/cs/show-cs-1.jpg is returned in both light and dark modes.

Example Using assets Foreign Variable

Instead of passing the image URL directly, it is possible to use the `assets` foreign variable to access files present in a package. Check [foreign variable in Variable page](ftd/variables/#foreign-variables) to know more. To use the `assets` variable, import the package as shown below:

Image using assets

-- import: fastn.com/assets

Lang:

ftd

Then, use the `files` field of `assets` variable to access files present in the package. For example:

Image using assets

-- import: fastn.com/assets

-- ftd.image:
src: $assets.files.images.cs.show-cs-1.jpg
width.fixed.px: 200
height.fixed.px: 115

Lang:

ftd

The output will look same as above.

Output: Image using assets

In this example, the `src` attribute of `ftd.image` component will be set to the URL of `show-cs-1.jpg` file present in the `images/cs` folder of the `fastn.com` package. i.e. URL of `/images/cs/show-cs-1.jpg`. Now, you must be wondering how does it get two different value of image for light mode and dark mode. When using an `assets` variable, if an image with the same name but with `-dark` suffix exists in the package, it will be used for the `dark` field. For example, if `show-cs-1-dark.svg` file exists in the `images/cs` folder, it will be used for the `dark` field, while `show-cs-1.svg` will be used for the light field.

`alt`

Type: `optional` [`string`](ftd/built-in-types/#string) Required: False The `alt` attribute specifies alternate [text description of the image](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt).

Sample code using `alt`

Input

-- import: fastn.com/assets

-- ftd.image: foo.jpg
alt: Image can't be displayed
color: $inherited.colors.text
padding.px: 10

Lang:

ftd

Output

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.