如何在 Phoenix (Elixir) 渲染中注入 HTML/manipulate DOM 变量以动态插入 SVG 或 PNG？

Question

如果我有一些 svg 通过分配给视图，比如一个 svg 变量，我可以渲染到视图中：

<%= @svg %>

但是，在 DOM 中，我可以检查页面并智能地看到 phoenix 默认不呈现 SVG，因为它是字符串表示形式。但是，我无法弄清楚如何覆盖该默认设置，以便我可以正确地将 SVG 注入 dom/render 而不仅仅是在页面中显示字符串，而是实际呈现图像。我该怎么做？我是否必须在事后使用 javascript 进行渲染——这也可以，但只在服务器端渲染就更好了。

非常感谢！

Answer 1

让内容不被转义，可以使用Phoenix.HTML.raw/1功能

下面是生成 SVG 二维码的例子：

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

如何在 Phoenix (Elixir) 渲染中注入 HTML/manipulate DOM 变量以动态插入 SVG 或 PNG？

How to inject HTML/manipulate DOM with variable in Phoenix (Elixir) rendering for example to dynamically insert an SVG or PNG?

javascript

dom

elixir

phoenix-framework