3

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...

psfinaki
  • 1,814
  • 15
  • 29

2 Answers2

5

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.

Maxime Mangel
  • 1,906
  • 16
  • 18
1

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" ]
]
onemorecupofcoffee
  • 2,237
  • 1
  • 15
  • 21
  • 1
    Well, yes, I need it for the `webpack` `file-loader` - it [looks](https://webpack.js.org/guides/asset-management/#loading-images) through `import` lines and loads files to the output directory so that one can safely reference them in code. – psfinaki Nov 13 '19 at 15:55
  • okay, not sure, but maybe you can do the imports in a separate js file and then import the js file into your fable app. Something like this ` [] let mylib: IAlert = jsNative` from [js interop](https://fable.io/docs/communicate/js-from-fable.html) – onemorecupofcoffee Nov 13 '19 at 16:28
  • Well, that's basically what I am doing now - I have a file `resources.js` where I load all the files and then I address them by names in code. But yes, this creates coupling... – psfinaki Nov 14 '19 at 09:15