如何在Fable中导入图像？

Question

我已经有了所有的webpack加载器，所以我需要做的就是这样，但是在F#中：

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

这应该是一件简单的事情，我只是迷失在文档中，我主要是找到关于[<Import>]属性的信息，这似乎是为了其他东西……

Answer 1

在模块Fable.Core.JsInterop中，我们提供了处理import的帮助器。

Source

我想你要找的是：

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

你可以这样使用它：

open Fable.Core.JsInterop

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

我将类型设置为string，因为WebPack似乎为您提供了文件的URL。

Answer 2

是否有特定的原因需要对镜像进行导入？

您可以轻松地在视图中显示图像(例如，elmish中)，而无需导入图像，只要您的url有效即可。

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" ]
]