Rendering img in an eex template: protocol Phoenix.HTML.Safe not implemented

Question

I have a project display page that displays text correctly:

<p><%= @post.body %></p>

<%= @post.title %></h1>

I want to display a user uploaded pic.

I tried:

<img src="<%= @post.project_pic %>"/>

which returns:

protocol Phoenix.HTML.Safe not implemented for %{file_name: "pexels-photo-144322 (1).jpeg", updated_at: #Ecto.DateTime<2017-08-06 14:05:26>}

This shows me the pic has uploaded and is stored in the database.

I added inspect:

 <img src="<%= inspect @post.project_pic %>"/>

as per this answer:

protocol Phoenix.HTML.Safe not implemented Elixir Phoenix

Which passes the compiler, but only displays a broken image icon.

How is the pic stored?

I have this in post.ex:

field :project_pic, Citybuilder.ProjectPic.Type

in stories.ex I have:

|> cast_attachments(attrs, [:project_pic])

in the latest migration file it's stored as a string:

 add :project_pic, :string

Maybe that's the error.

I'm not sure if the error is in my eex syntax, or somewhere deeper in the file structure.

How are you computing and storing project_pic? You probably want <%= @post.project_pic.file_name %> if the image is in the same root path. — Dogbert
I updated my question to include more info. See "How is the pic stored?" If you want to know anything else, please ask. — RubyRube
Does this work: <img src="<%= Citybuilder.ProjectPic.url({@post.project_pic, @post}, :original) %>"/>? — Dogbert

Dogbert Dogbert · Accepted Answer · 2017-08-06T15:48:41

arc_ecto defines a url function in your attachment module, which you can call to get the complete URL of the upload which can then be used as src in an <img> tag. The first argument is a tuple of the attachment value and the whole model, and the second is the image size (:original is the original full size image). The following should embed the original full size image for you:

<img src="<%= Citybuilder.ProjectPic.url({@post.project_pic, @post}, :original) %>"/>

Check out the documentation of arc_ecto for more.

Rendering img in an eex template: protocol Phoenix.HTML.Safe not implemented

1 Answers