Usage
Input
-- import: fastn.com/assets
-- ftd.image:
src: $assets.files.images.cs.show-cs-1.jpg
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
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
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:
-- import: fastn.com/assets
Then, use the `files` field of `assets` variable to access files present in the
package. For example:
-- import: fastn.com/assets
-- ftd.image:
src: $assets.files.images.cs.show-cs-1.jpg
width.fixed.px: 200
height.fixed.px: 115
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
Output