Accessing images in a Elixir Surface Component

Questions / Help
, ,
1

Hello!

I just started using Surface and have been loving it! I wanted to move a piece of my code from the main .sface file to a Surface component, but when I did this the following line stopped working:

<img src={Routes.static_path(@socket, "/images/myimage.png")} />

The error is about how socket isn’t a key in the component’s map, but I’m unsure what to use instead.

key :socket not found in: %{__changed__: nil, __context__: %{}, name: "June"}
2

socket is available in the assigns map in a Surface View. However, it will not be available the Surface Component. You will have to make a prop and pass it from the view like so:
In the Surface component add the prop: prop(socket, :any, required: true). And in the view, pass the socket:

def render(assigns) do
    ~F"""
       <Component socket={@socket} />
     """
end
2 Likes
3

@aceupmysleeves & @ani you could use your application Endpoint instead of passing @socket to the component.

<img src={Routes.static_path(MyApp.Endpoint, "/images/myimage.png")} />
1 Like