Programming Phoenix Live View B6 pg 142 Interpreting HEEX tags

Community PragProg Customers
1

When entering the code for the image preview as in the book:

<article class="column">
<img alt="product image" width="200" height="200"
     src="<%= Routes.static_path(@socket, @product.image_upload || "images/default-thumbnail.jpg")%>">
</article>

I get the following error:

== Compilation error in file lib/pento_web/live/product_live/show.ex ==
** (Phoenix.LiveView.HTMLTokenizer.ParseError) lib/pento_web/live/product_live/show.html.heex:18:11: expected closing " for attribute value

Make sure the attribute is properly closed. This may also happen if
there is an EEx interpolation inside a tag, which is not supported.
Instead of

<div <%= @some_attributes %>>
</div>

do

<div {@some_attributes}>
</div>

Where @some_attributes must be a keyword list or a map.

(phoenix_live_view 0.17.7) lib/phoenix_live_view/html_tokenizer.ex:487: Phoenix.LiveView.HTMLTokenizer.handle_attr_value_quote/7
(phoenix_live_view 0.17.7) lib/phoenix_live_view/html_engine.ex:121: Phoenix.LiveView.HTMLEngine.handle_text/3
(eex 1.12.1) lib/eex/compiler.ex:48: EEx.Compiler.generate_buffer/4
(phoenix_live_view 0.17.7) expanding macro: Phoenix.LiveView.Renderer.__before_compile__/1
lib/pento_web/live/product_live/show.ex:1: PentoWeb.ProductLive.Show (module)

If I modify the code as suggested by the compiler:

<article class="column">
<img alt="product image" width="200" height="200"
     src="{Routes.static_path(@socket, @product.image_upload || "images/default-thumbnail.jpg")}">

</article>

I get a different error:

== Compilation error in file lib/pento_web/live/product_live/show.ex ==
** (Phoenix.LiveView.HTMLTokenizer.ParseError) lib/pento_web/live/product_live/show.html.heex:18:72: expected attribute name
(phoenix_live_view 0.17.7) lib/phoenix_live_view/html_tokenizer.ex:350: Phoenix.LiveView.HTMLTokenizer.handle_attribute/5
(phoenix_live_view 0.17.7) lib/phoenix_live_view/html_engine.ex:121: Phoenix.LiveView.HTMLEngine.handle_text/3
(eex 1.12.1) lib/eex/compiler.ex:48: EEx.Compiler.generate_buffer/4
(phoenix_live_view 0.17.7) expanding macro: Phoenix.LiveView.Renderer.before_compile/1
lib/pento_web/live/product_live/show.ex:1: PentoWeb.ProductLive.Show (module)

The docs say that I need to use {} inside a tag, but the book is using <=% %>, which is the correct way and why does neither one appear to work in this snippet?

2

Ok this looks like it is an actual issue, which was apparently fixed but I’m not sure if it’s been released, I updated to phoenix-1.6.6 but that didn’t fix it, so I got around it by making a helper function.

defp product_image(socket, product) do
      Routes.static_path(socket, product.image_upload || "/images/default-thumbnail.png")
  end

and then calling it like

<article class="column">
<img alt="product image" width="200" height="200"
     src={product_image(@socket, @product)}>
</article>