如何在 Grails 中显示图像？答案

【问题标题】：how to display images in Grails?如何在 Grails 中显示图像？
【发布时间】：2011-04-29 04:20:15
【问题描述】：

我正在尝试使用以下代码在 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 代码）。它只是空白。

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

【问题讨论】：

我第二个 - 你得到的 HTML 是什么？您生成的网址中是否有任何文件？
@Victor 没有生成代码。它只是空白。我怀疑它根本没有迭代。
看起来@netbrain 是对的，您需要将数组转换为列表 - 如果println imageList 给出了一些合理的信息。
@Victor：还是没有运气。我已经编辑了我的问题。

标签： image grails gsp

【解决方案1】：

这更简单。您应该从操作中返回一个模型作为 Map：[imageList: imageList]，以便 imageList 在 GSP 中按名称提供。

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

【讨论】：

【解决方案2】：

您正在返回一个文件对象列表，您将在其中调用文件对象的 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[] 这样的简单数组类型，您可以尝试将其转换为 List。

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

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

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

【讨论】：

其实File.list()返回String[]。

【解决方案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 之外为它们提供服务。

【讨论】：

抱歉，这是错误的 - <img src="${createLinkTo(dir:'images', file:'file.png')}" 确实有效，有时甚至 <img src="images/file.png"/> 也有效。如果无法访问 WEB-INF 会有什么意义？
不，你错了。 WEB-INF 目录是Web 应用程序的私有区域，WEB-INF 目录下的任何文件都不能通过指定URL 如somesite/WEB-INF/someresource.html 直接从浏览器访问。 Web 容器不会提供此目录的内容。但是，应用程序中的类可以访问 WEB-INF 目录的内容。因此，如果您不希望从 Web 浏览器直接访问 JSP 或 HTML 文档等任何资源，则应将其放在 WEB-INF 目录下。发件人：goo.gl/eH9aP
哦，我的错 - 我一直在阅读“web-app”而不是“web-inf”。您能否编辑您的答案，以便我删除反对票？无论如何，最好将 images 文件夹放入 web-app 并将它们作为文件提供，而不是通过应用程序代码管道它们。

【解决方案4】：

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

在您的控制器中：

def baseFolder = servletContext.getRealPath("/")
def folder = baseFolder + '/images/' // web-app/images/
def imagesFolder = new File(folder)
def files = imagesFolder.listFiles().toList()
List<String> imageList = []
files.each {
    imageList.add(it as String)
}
return imageList

您认为 3：

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

【讨论】：