如何引入图片

Question

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

Answer 1

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

Comments

这是一个 SVG 文件。有工具可以将 SVG 文件转换为 SVG 标记吗？
我也找不到确切的答案，但是有没有可能引入一个图片？

---

SVG 是一种标记语言。只需在文本编辑器中打开 SVG，您即可看到标记。然后您可以将其复制/粘贴到 Hiccup 转换器中的 HTML 中。

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

以下是一个链接，描述了这两种技术：[在 Web 中添加矢量图形](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/)

---

嗯...我也不确定您说的“需要一张图片”是什么意思。理论上，您可以将 SVG 捕获并将它们附加到 Hiccup 返回的渲染 HTML 中，无论您想在什么位置放置它们。或者使用 hickory [hickory](https://github.com/davidsantiago/hickory) 将它们转换为 Hiccup，并在渲染之前将其插入 Hiccup 中。这是我能为 Hiccup 内部需要图片所能想到的最接近的方法。

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

---

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

---

如果是这样的情况，技术上并不算是“请求/导入图像”，这只是糖为包提供者提供路径以进行处理。显然，你不能将图像文件（或其他）导入到JS上下文中，所以我记得在webpack等环境上下文中，它将处理绝对/相对/服务路径，或者内联一个字符串（可能已转换为某种反序列化对象）。