如何在 Phoenix (Elixir) 渲染中使用变量注入 HTML/操作 DOM

Question

如果我有一些 svg 通过分配给视图，比如一个svg变量，我可以渲染到视图中：<%= @svg %>但是，在 DOM 中，我可以检查页面并智能地看到 phoenix 默认不呈现 SVG，因为它是字符串表示形式。但是，我无法弄清楚如何覆盖该默认值，以便我可以正确地注入 dom/渲染 SVG 而不仅仅是在页面中显示字符串，而是实际渲染图像。我该怎么做？我是否必须在事后使用 javascript 进行渲染——这也可以，但只在服务器端渲染就更好了。非常感谢！

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函数会自动导入到模板中。