Как импортировать изображение в Fable?

Question

У меня уже есть все загрузчики веб-пакетов, поэтому все, что мне нужно сделать, это вот что, но в 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

Есть ли конкретная причина, по которой вам нужно выполнить импорт изображения?

Вы можете легко отображать изображения в вашем представлении (например, в 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" ]
]