f# - 如何在 Fable 中导入图像？

Question

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

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

这应该是一件容易的事，我只是迷失在文档中，我主要找到关于[<Import>]属性的信息，这似乎是为了别的东西......

Answer 1

在模块Fable.Core.JsInterop中，我们确实提供了处理import.

资源

我认为您正在寻找的是：

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

是否有特定原因需要为图像进行导入？

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

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