在 eex 模板中渲染 img：协议 Phoenix.HTML.Safe 未实现答案

【问题标题】：Rendering img in an eex template: protocol Phoenix.HTML.Safe not implemented在 eex 模板中渲染 img：协议 Phoenix.HTML.Safe 未实现
【发布时间】：2017-08-06 23:48:41
【问题描述】：

我有一个可以正确显示文本的项目显示页面：

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

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

我想显示用户上传的图片。

我试过了：

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

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

这显示图片已上传并存储在数据库中。

我添加了检查：

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

根据这个答案：

protocol Phoenix.HTML.Safe not implemented Elixir Phoenix

通过编译器，但只显示损坏的图像图标。

图片是如何存储的？

我在 post.ex 中有这个：

field :project_pic, Citybuilder.ProjectPic.Type

在 stories.ex 我有：

|> cast_attachments(attrs, [:project_pic])

在最新的迁移文件中，它以字符串形式存储：

 add :project_pic, :string

也许这就是错误。

我不确定错误是在我的 eex 语法中，还是在文件结构更深的地方。

【问题讨论】：

你是如何计算和存储project_pic的？如果图像位于同一根路径中，您可能需要<%= @post.project_pic.file_name %>。
我更新了我的问题以包含更多信息。请参阅“图片是如何存储的？”如果您想了解其他任何信息，请询问。
cast_attachments 表示您正在使用arc 和arc_ecto？
是的，我们正在使用 arc 和 arc_ecto
这行得通吗：<img src="<%= Citybuilder.ProjectPic.url({@post.project_pic, @post}, :original) %>"/>?

标签： elixir phoenix-framework

【解决方案1】：

arc_ecto 在您的附件模块中定义了一个 url 函数，您可以调用该函数来获取上传的完整 URL，然后可以在 <img> 标记中将其用作 src。第一个参数是附件值和整个模型的元组，第二个参数是图像大小（:original 是原始全尺寸图像）。以下应为您嵌入原始全尺寸图像：

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

查看documentation of arc_ecto 了解更多信息。

【讨论】：