我正在尝试获取图像的宽度和高度，所以给一个URL，该图像的宽度和高度是多少
最佳答案
我不相信榆树有办法做到这一点。端口是一种可能的解决方案。您可以阅读有关它们的信息 here 。我写了一个你的用例的小例子，你可以在 ellie 上运行你自己。在此示例中，我使用您在评论中给出的 JS 示例，但还有其他可能的解决方案，例如事件监听器或查询 DOM。
主文件
port module Main exposing (main)
import Html exposing (..)
import Html.Attributes exposing (..)
main : Program Never Model Msg
main =
Html.program
{ init = init
, update = update
, view = view
, subscriptions = subscriptions
}
type alias Model =
{ imageUrl : String
, dim : Maybe ( Int, Int )
}
testImg : String
testImg =
"https://images-na.ssl-images-amazon.com/images/I/71TcaVWvBsL._SY355_.jpg"
init : ( Model, Cmd msg )
init =
Model testImg Nothing
! [ getDim testImg ]
type Msg
= UpdateDim ( Int, Int )
update : Msg -> Model -> ( Model, Cmd msg )
update msg model =
case msg of
UpdateDim xy ->
{ model | dim = Just xy } ! []
view : Model -> Html msg
view model =
case model.dim of
Nothing ->
div [] []
Just dims ->
div []
[ img [ src model.imageUrl ] []
, text <|
"size: "
++ toString dims
]
subscriptions : Model -> Sub Msg
subscriptions model =
newDim UpdateDim
-- this port handles our incomming height and width
-- and passes it to a Msg constructor
port newDim : (( Int, Int ) -> msg) -> Sub msg
-- this port passes our string out of Elm and into
-- js land
port getDim : String -> Cmd msg
索引.html
<html>
<head>
<style>
/* you can style your program here */
</style>
</head>
<body>
<script>
var app = Elm.Main.fullscreen()
// you can use ports and stuff here
app.ports.getDim.subscribe(function(url){
// recieve the url for the image through
// the `getDim` port in Main.elm
let img = new Image()
img.src = url
img.onload = function() {
// send the height and width back to elm through
// the `newDim` port in Main.elm
app.ports.newDim.send([img.height, img.width])
}
})
</script>
</body>
</html>
关于榆木:获取图像的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48551782/