如何要求插入图片

Question

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

Answer 1

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

Comments

它是一个 SVG 文件。有没有什么工具可以把 SVG 文件转换成 SVG 标记？
我也找不到一个确切的答案，但有没有一个方法可以要求提供一张图片呢？

---

SVGs 是一种标记语言。只需在文本编辑器中打开 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/

---

嗯...我也不确定你说的“要求提供一张图片”是什么意思。理论上，您可以将 SVGs 吃掉并将它们追加到 Hiccup 返回的渲染 HTML 中您想要放置的地方。或者使用 hickory https://github.com/davidsantiago/hickory 将其转换为 Hiccup，并在渲染之前将其插入 Hiccup 中。这是我可以想到的将图片要求在 Hiccup 中使用的方法。

除了手动内联 SVGs 或像我刚才提到的自动使用像“slurp”这样的方法之外，您还需要将 SVGs 添加到您的网络服务器作为资源。然后在 Hiccup 中，您将有一个对它们 URL 的引用。

---

我猜意图是要做这样的事情
https://stackoverflow.com/a/43851378

---

如果是这种情况，这并不技术上属于“要求/导入图像”，这只是一个供包装器使用以处理路径的糖。显然，你不能在JS环境中“导入”图像文件（或其他类型），所以我想起，比如在webpack的上下文中，它会处理绝对/相对/提供的路径，或者内联一个字符串（可能是转换为某种反序列化对象）。