如何要求一幅图像

Question

我正在制作一些 hiccup 组件，并且它们使用不同的图标。我如何在代码中导入它们呢？

Answer 1

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

Comments

这是一个 SVG 文件。有没有工具可以将 SVG 文件转换为 SVG 标记？
此外，我也没找到确切的答案，但有没有办法要求一个图像？

---

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

或者，你只需使用 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/

---

嗯...也不是很清楚你说的“引入图片”是什么意思。从理论上讲，你可能可以将 SVG 文件吞入并附加到由 Hiccup 返回的渲染 HTML 中任何你想放置的位置。或者使用 hickory https://github.com/davidsantiago/hickory 将它们转换为 Hiccup 并在渲染前将它们插入到 Hiccup 中。这是我想到的最接近你在 Hiccup 中引入图片的方法。

除了手动在 SVG 中内联，或者像我刚才提到的那样自动使用 slurp，你还需要将 SVG 作为资源添加到你的 web 服务器上。然后你将在 Hiccup 中有它们的 URL 引用。

---

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

---

如果那样，技术上并不是“要求/导入图像”，只是糖提供给包绑定器以处理路径。显然，你不能将图像文件（或其他内容）导入到JS上下文中，因此我回想起在webpack等上下文中，它将处理绝对/相对/托管路径，或者内联一个字符串（可能转换为某种反序列化事物）。