如何在寓言中导入图像？

Question

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

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

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

Answer 1

您是否有特定原因需要导入图像？

只要您的 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" ]
]

Answer 2

在模块 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.

如何在寓言中导入图像？

How to import an image in Fable?

f#

fable-f#

safe-stack