如何引入图片

Question

我目前正在开发一些hiccup组件，并使用不同的图标。我是否可以在代码中导入它们？

Answer 1

那是SVG吗？将SVG标记转换为Hiccup（https://htmltohiccup.herokuapp.com/），并将其作为Reagent组件放入代码中。

Comments

它是一个SVG文件。是否有我可以使用的工具将SVG文件转换为SVG标记？
同时，我也找不到一个确切的答案，但是是否有方法引入图片？

---

SVG 是一个标记。只需在文本编辑器中打开 SVG 文件，您就会看到该标记。然后您可以将其复制粘贴到 HTML 到 Hiccup 转换器中。

或者，您也可以直接使用 img 标签来添加它们。

以下是描述这两种技术的链接：https://mdn.org.cn/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web

您还可以在 CSS 中将它们用作背景图片。您还可以将它们全部添加到字体中，然后用作字体：https://mediatemple.net/blog/tips/creating-implementing-icon-font-tutorial/

---

嗯...我也不确定您所说的“require an image”指的是什么。理论上，您可以吸收 SVG 图像并将它们附加到 Hiccup 返回的渲染 HTML 中，无论您想放哪里。或者使用 hickory https://github.com/davidsantiago/hickory 将它们转换为 Hiccup 并在渲染前插入到 Hiccup 中。这是我想到的将图像要求在 Hiccup 中使用的方法。

除了手动内联 SVG 或像我刚刚提到的那样自动使用 say slurp 外，您还需要将 SVG 添加到您的 Web 服务器作为资源。然后在 Hiccup 中，您将有一个对它们的 URL 的引用。

---

我猜意图是想这样做
https://stackoverflow.com/a/43851378

---

如果真是这样，这并不是技术上“强制要求/导入图像”，这只是糖为提供程序包装提供路径。显然，你不能将图像文件（或任何东西）导入JS上下文中，所以我记得在webpack等环境中，它将处理绝对/相对/服务路径，或者将字符串内联（可能已转换为某种反序列化东西）。