HEEX not rendering inside ()

Phoenix Forum Questions / Help
1

I want to get to this rendered HTML inside a Liveview .heex file
<div class="md:container md:mx-auto bg-cover bg-center" style="background-image: url(https://assets.app.com/uploads/banner_5.sm.jpg?v=63807899217)">BG</div>

I am trying this and it’s not working

<div class="md:container md:mx-auto bg-cover bg-center" style="background-image: url({App.ImageUploader.url({@user.profile_image, @user}, :thumb)})">BG2</div>

If someone has written good docs or blogs or a book on HEEX gotchas and examples, I am in the buyers market right now for HEEX syntax examples

2

Can you try this?

style={"background-image: url(#{App.ImageUploader.url(@user.profile_image, @user, :thumb)})"}

In heex - to interpolate any attributes use { } like

# if @some_variable = "container-xxl"
<div  class={"container #{@some_variable}"}> <!-- will work and generate below tag -->
<div class="container container-xxl"> 

<div  class="container #{@some_variable}"> <!-- will not work and it will have same value-->

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Helpers.html#sigil_H/2

3 Likes
3

thanks @kartheek this works

BG

also, thanks for the link to docs

1 Like
4

@niccolox I am glad the solution worked.

Below pages helped me to learn about heex and migrate from eex :

  1. Assigns and HEEx templates

  2. Helpers :

    • assigns_to_attributes
    • form
    • inner_block
    • live_title_tag
    • render_slot
    • sigil_H

  3. Component

1 Like