如何在 Grails 中显示图像？

Question

我正在尝试使用以下代码在 GSP 页面中渲染 /WEB-INF/images/sps 中的图像：

def index = {
    def baseFolder = grailsAttributes.getApplicationContext().getResource("/").getFile().toString()
    println baseFolder
    def imagesFolder = baseFolder + '/images/sps'
    println imagesFolder
    def imageList1 = new File(imagesFolder).list()
    println imageList1
    def imageList = Arrays.asList(imageList1)       
    println imageList
    imageList
    //redirect(action:"displayImages", params:["imageList":imageList])
    //render(view:"displayImages")
}

控制器能够从文件系统读取图像。但是当我尝试使用以下代码显示它们时，图像没有出现。

index.gsp

<g:each in="${imageList}" var="image">
   <img src="${resource(dir: 'images', file: image.filename)}" alt="Grails"/>
</g:each>

我犯了什么错误？

编辑：

当我尝试使用单个图像时，它工作正常 - 我能够查看 WEB-INF/images 文件夹中的图像

<img src="${resource(dir: 'images', file: '1.jpg')}" alt="Grails"/>

并且没有 HTML为循环代码生成的代码（在index.gsp 代码上方）。它只是空白。

我的要求是显示文件系统文件夹中的所有图像文件。

Answer 1

事情更简单了。您应该从操作中以映射形式返回模型：[imageList: imageList]，以便 imageList 在 GSP 中按名称可用。

是的，您可以将 images 文件夹移动到 web-app - 全世界都可以通过 HTTP 请求您的图像吗？

Answer 2

您将返回一个 File 对象列表，您将在其中调用文件对象的 toString 方法，该方法很可能返回文件对象的绝对文件路径。
这将在 html 源代码中为您提供类似的内容

<img src="/app/images/c:\path\to\imagefile.png">

尝试调用

<img src="${resource(dir: 'images', file: image.name)}" alt="Grails"/>

如果不起作用，请向我们展示它生成的 html 代码。

---

新知识，上面的方法行不通。 File.list()的返回实际上是String[]，其中每个字符串都是文件名而不是完整路径。

无论如何，查看 html 源代码将有助于了解到底打印出什么内容。

我怀疑 g:each 可能不支持迭代简单的数组类型（如 String[]），您可以尝试将其转换为列表。

def imageList = Arrays.asList(new File(imagesFolder).list())

---

您是否尝试过将其转换为列表并使用 g:each ？

为什么要将图像存储在 WEB-INF/images 中？为什么不只是图像？我认为代码 ${resource(dir:'images')} 会指向后者。

Answer 3

您无法使用标准图像标签渲染位于 WEB-INF 下的图像。这些图像无法通过网络访问。您将需要另一个控制器来将图像流式传输回视图。像这样：

class AvatarController {

  def show = {

    def userInstance = User.get(params.id)
    def avatarFilePath = new File(userInstance.avatarURL)
    response.setContentType("application/png")
    response.setContentLength(avatarFilePath.size().toInteger())
    OutputStream out = response.getOutputStream();
    out.write(avatarFilePath.bytes);
    out.close();
  }
}

然后显示此图像：

<img src="/app/avatar/1234" />

我将让您将其转换为您自己的需求。然而，关键是您必须将图像流式传输回来，因为它在当前位置无法通过网络访问。

不过，您最好在 WEB-INF 之外为它们提供服务。

Answer 4

1. 不要在 WEB-INF 中存储数据，将图像存储在 /web-app/images/

2. < p>在你的控制器中：

   <块引用>

   def baseFolder = servletContext.getRealPath("/")
   def 文件夹 = baseFolder + '/images/' // web-app/images/
   def imagesFolder = 新文件（文件夹）
   def 文件 = imagesFolder.listFiles().toList()
   列表<字符串>图片列表 = []
   文件.each {
       imageList.add（作为字符串）
   }
   返回图像列表
   

3 你认为：

   <g:each in="${imageList}" var="image">
       <img src="${resource(dir: 'images', file: image)}" alt="Grails"/>
    </g:each>