How to import an image in Fable?

Question

I already have all the webpack loaders, so all I need to do is this, but in F#:

import loading from "../images/loading.gif";

This should be an easy thing, I am just lost in the docs and I mostly find info about [<Import>] attribute which seems to be for something else...

Answer 1

In the module Fable.Core.JsInterop we do provide helpers for dealing with import.

Source

I think the one you are looking for is:

/// Works like `ImportAttribute` (same semantics as ES6 imports).
/// You can use "*" or "default" selectors.
let import<'T> (selector: string) (path: string):'T = jsNative

And you can use it like that:

open Fable.Core.JsInterop

let loading : string = import "*" "../images/loading.gif"

I set the type to string because WebPack seems to give you the file URL.

Answer 2

Is there a specific reason you need to do the import for the image?

You can easily display the images in your view (eg. in elmish) without having to import the images, as long as your url's are valid.

let view model dispatch =
    div [] [
            img [   Class "mr-3 mt-1" 
                    Style [ Width 33% ; Height "80px" ]
                    Src "../images/loading.gif"
                    Alt cat.Text; Placeholder "image" ]
]