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

Question

如果我有一些 svg 通过分配给 svg 变量上的 View ，我可以使用以下方式渲染到 View 中:

<%= @svg %>

但是，在 DOM 中，我可以检查页面并智能地看到 phoenix 默认不渲染 SVG，因为它是字符串表示形式。但是，我不知道如何覆盖该默认值，以便我可以正确地注入(inject) 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 函数会自动导入到模板中。