如何引入图片

Question

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

Answer 1

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

Comments

这是一个 SVG 文件。我可以用什么工具将 SVG 文件转换为 SVG 标记吗？
我也没有找到确切的答案，但有没有办法强制添加图片呢？

---

SVGs是标记语言。只需要在文本编辑器中打开svg文件，你就能看到其标记代码。然后可以将这些标记代码复制粘贴到Hiccup转换器中的HTML中。

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

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

你还可以将它们用作CSS的背景图片。你也可以将所有的svg都添加到一个字体中，然后使用它们作为字体： https://mediatemple.net/blog/tips/creating-implementing-icon-font-tutorial/

---

嗯...我也不确定你说的“强制添加图片”是什么意思。理论上，你可以将这些SVG文件吸入，并将它们追加到从Hiccup返回的渲染HTML的任何位置。或者使用hickory https://github.com/davidsantiago/hickory将它们转换为Hiccup，并在渲染之前插入它们。这是我能想到的在你Hiccup中使用图片的最近似方法。

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

---

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

---

如果是这种情况，这实际上并不是技术上的“要求/导入一张图像”，而是糖为包提供路径以进行处理的。显然你不能将图像文件等“导入”到JS语境中，因此我记得，例如在webpack的语境中，它将处理绝对/相对/提供服务路径，或者将一个字符串内联（可能转换为一个某种反序列化的东西）。