Search code examples
templateselixirphoenix-framework

How to render img with Phoenix?

I'm new in phoenix. I need to display all the posts and pictures to them on the main page. I written below code in my index template:

<img src="<%= Blog.Image.url({@post.image, @post}, signed: true) %>">

And i got this

lib/blog_web/templates/post/index.html.heex:19:21: expected closing " for attribute value

What i missing?

Solution

  • The HEEx documentation notes:

    ...code interpolation using <%= ... %> and <% ... %> are restricted to the body (inner content) of the HTML/component nodes and it cannot be applied within tags.

    Instead, there is specific HEEx syntax attribute={expression} for interpolating attribute values. In your example, you'd use

    <img src={Blog.Image.url({@post.image, @post}, signed: true)}>

    The engine will correctly insert quotation marks and other escaping as required (or, if Blog.Image.url/2 returns nil, omit the attribute entirely).