如何在re-frame、re-agent应用程序中使用位于资源文件夹中的图像？

Question

我有一个使用Chestnut创建的应用程序，项目中有一张图片，位置在：resources/public/img.png。 我想在我的应用程序中使用这个图片，但是使用[:img {:src "public/img.png"}]或[:img {:src "./img.png"}]无法正常工作。资源文件夹中图片的正确src是什么？

- zengod

Answer 1

目录部分resources/public是隐式的。您需要像这样访问文件:

(ns demo.core
  (:require [clojure.java.io :as io]))

  ; something like this
  (slurp       (io/resource "img.png")) ; returns bytes from file
  (io/stream   (io/resource "img.png")) ; returns in InputStream for file

例如：

(ns tst.demo.core
  (:use tupelo.core tupelo.test)
  (:require [clojure.java.io :as io]))

(dotest
  (let [bytes (slurp (io/resource "sample.json"))]
    (spyx (count bytes))))

带有结果

(count bytes) => 72

- Alan Thompson

---

有没有一种方法可以调试这个问题？ - zengod

好的，有一件事情我注意到了。当我访问localhost:3449，也就是Figwheel端口时，src代码能够正常运行，但是在app运行的localhost:5000上则不能。这可能是什么原因造成的呢？ - zengod

Figwheel服务器会自动将resources/public目录下的所有内容包含在类路径中，因此io/resource可以找到它。如果您有第二个运行在5000端口上的服务器，则需要自己复制这个行为。 - Alan Thompson

Answer 2

前往您的project.clj文件，并搜索figwheel设置。确保取消注释：http-server-root。

:figwheel {
             :http-server-root "public"       ;; serve static assets from resources/public/

...

}

然后[:img {:src "img.png" }]应该可以工作了。并且不要忘记重新启动figwheel。

- Simon Polak

---

这对我没有用。我仍然无法使用src在我的应用程序中显示资源文件夹中的图像。 - zengod

是的，我重新启动了服务器。它没有起作用。使用Chestnut 0.18.0版本。 - zengod

很奇怪，因为我刚刚运行了 lein new chestnut demo-app，将 bunny.jpeg 复制到 resources/public 文件夹中，并在 core.clj 的 greeting 函数中添加了 [:img {:src "bunny.jpg"}]]），然后它就可以正常工作了。你是怎么运行这个应用的？是通过 repl 中的 user 命名空间运行的，使用 (go) 和 (stop) 命令吗？ - Simon Polak

如果这样可以的话，那么可能是你在user.clj中篡改了dev-system，wrap-file中间件需要存在。 - Simon Polak

我还创建了一个新的栗子项目，将一张图片复制到公共文件夹中，然后在栗子“Hello Chestnut！”问候语正下方添加了[:img {:src“myimage.jpg”}]。但是仍然没有图片。 - zengod

Answer 3

我还没有使用过Chestnut。我假设有一个正在运行的Web服务器，其根目录是resources/public。我假定在那个文件夹中有一个index.html（或等效）文件。我进一步假设你想要的Hiccup在那个index.html文件中。考虑到上述所有情况，我会尝试使用[:img {:src "img.png"}]。

- dorab

---

是的，index.html和img.png在同一个目录resources/public中，我已经尝试过"img.png"，但它不起作用。 - zengod

是的，我想要在index.html中出现的小故障。 - zengod

索引文件 index.html 中是否显示了任何内容？例如简单的“Hello World”？如果没有，那么也许下面 blushrt 所说的可能是问题所在。 - dorab

你好世界确实出现了，但是 index.html 中的 <img src="img.png"> 没有显示出来。 - zengod

好的，我注意到了一件事。当我访问localhost:3449，也就是Figwheel端口时，src文件可以正常工作，但是在运行应用程序的localhost:5000上却不能正常工作。这可能是什么原因呢？ - zengod