aceupmysleeves
Accessing images in a Elixir Surface Component
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"}
Marked As Solved
ani
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
Also Liked
Malian
@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")} />
Popular in Questions
Other popular topics
Latest on Elixir Forum
Sponsor Spotlight
The deployment platform built for Elixir: PaaS ease, VPS control.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"