CODEWITHSUNDEEP
elixirphoenix-framework
RubyRube
RubyRube

Reputation: 602

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

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.

Upvotes: 1

Views: 1209

Answers (1)

Dogbert
Dogbert

Reputation: 222198

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.

Upvotes: 3

Related Questions