如何在 Phoenix (Elixir) 渲染中注入 HTML/使用变量操作 DOM，例如动态插入 SVG 或 PNG？

Question

如果我有一些 svg 通过分配给变量上的视图svg，我可以使用以下命令渲染到视图中：

\n

<%= @svg %>\n

\n

然而，在 DOM 中，我可以检查页面并智能地看到 phoenix 默认不渲染 SVG，因为它是字符串表示形式。但是，我不知道如何覆盖该默认值，以便我可以正确地注入 dom/渲染 SVG，而不仅仅是在页面中显示字符串，而是实际渲染图像。我该怎么做？我是否必须使用 javascript 来渲染事实\xe2\x80\x94 这也没关系，但仅在服务器端渲染会非常好。

\n

非常感谢！

\n

Answer 1

这样内容就不会被转义，可以使用该Phoenix.HTML.raw/1函数。

以下是 SVG QRCode 生成的示例：

<section>
  <p style="text-align:center">
    <%=
      Routes.some_path(MyApp.Endpoint, :index, @some_id)
      |> QRCode.create!(:high)
      |> QRCode.Svg.create()
      |> raw()
    %>
  </p>
</section>

它生成内联 SVG。请注意，该raw/1函数会自动导入到模板中。