如何请求图片

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/

---

嗯...对于您说的"要求图片"的意思也不是很清楚。理论上，您可以在希望它们出现的地方将SVG拖拽过来并附加到Hiccup渲染的HTML上。或者使用hickory https://github.com/davidsantiago/hickory将它们转换为Hiccup，在渲染前将它们插入Hiccup中。这是我想到的在Hiccup内要求图片的最好方法。

除了手动嵌入SVG，或者像我刚才提到的自动嵌入（比如使用拖拽），您还需要将SVG作为资源添加到您的Web服务器。然后在Hiccup中您会有一个指向它们的URL的引用。

---

我猜测您的意图是做类似这样的操作
https://stackoverflow.com/a/43851378

---

如果是这种情况，那么这并不是技术上所说的“要求/导入一个图片”，而只是糖供应了一个带有处理路径的打包器。显然，你不能将一个图片文件（或其他内容）导入一个JS上下文中，所以我记得，比如在webpack的上下文中，它会处理绝对路径/相对路径/提供路径，或者内联一个字符串（可能是转换成了某种反序列化对象）。