如何在 Fable 中导入图像？答案

【问题标题】：How to import an image in Fable?如何在 Fable 中导入图像？
【发布时间】：2019-11-09 17:14:13
【问题描述】：

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

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

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

【问题讨论】：

标签： f# fable-f# safe-stack

【解决方案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。

【讨论】：

【解决方案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" ]
]

【讨论】：

嗯，是的，我需要它用于webpack file-loader - 它从looks 到import 行并将文件加载到输出目录，以便可以在代码中安全地引用它们。
好的，不确定，但也许您可以在单独的 js 文件中进行导入，然后将 js 文件导入您的寓言应用程序。像这样的 ` [] let mylib: IAlert = jsNative` from js interop
嗯，这基本上就是我现在正在做的事情——我有一个文件resources.js，我在其中加载所有文件，然后在代码中通过名称对它们进行寻址。但是，是的，这会产生耦合......