grails - 从 JavaScript 加载图像

Question

在我的 Grails 应用程序中，我有一个目录 web-app/images/carousel/slides，其中包含以下文件:

• foo.png
• foo.thumbnail.png
• 酒吧.png
• bar.thumbnail.png

我的应用程序正在使用资源 Grails 插件，并且主图像使用其标签之一加载到 GSP 中:

<r:img file="carousel/slides/foo.png"/>

生成:

<img src="/myapp/static/images/carousel/slides/foo.png">

我尝试通过构建诸如 /myapp/static/images/carousel/slides/foo.thumbnail.png 之类的路径来从 JavaScript 加载缩略图。但是当我尝试显示其中一张图像时，我得到了 404。

同样，如果在浏览器地址栏中输入以下路径

http://localhost:8080/myapp/static/images/carousel/slides/foo.png

图像显示正确，但如果我输入

http://localhost:8080/myapp/static/images/carousel/slides/foo.thumbnail.png

我收到 404 错误。为什么我的缩略图在运行时在同一路径中不可用，因为它们位于同一源目录中？我怀疑答案与以下事实有关:主图像是使用资源框架加载的，而我尝试从 JavaScript 加载缩略图。

Answer 1

您主要回答了自己的问题:如果您不以某种方式使用资源引用图像，那么它们就不会被处理。

最好的选择是创建一个包含所有图像列表的资源模块。将此资源添加到页面。

// grails-app/conf/CarouselResource.groovy
modules = {
    carousel {
        resource url:'/images/carousel/foo.jpg'
        resource url:'/images/carousel/foo.thumbnail.jpg'
        ...
    }
}

然后在您的普惠制中

<r:require module="carousel"/>

现在，模块描述是 DSL，因此您也许可以使用某种文件循环来自动添加所有文件，但我不能 100% 确定如何添加。您也可以尝试类似 '/images/carousel/**' 的方法，但文档没有说明这是否有效。

<小时/>

另外，我应该提到，如果您使用任何基于缓存的资源插件，这将没有帮助。然后，您需要手动调用 r.img() 并在 JavaScript 中设置它，如下所示(如果有效):

<r:script>
    var images = [
        '${r.img(...)}'
    ];
</r:script>

这是因为使用缓存资源等生成的 URL 通常是文件内容的哈希值，以允许长期缓存。它们通常仅与原始文件名间接相关。

<小时/>

根据以下评论进行更新:

要远程加载通用 JS，但包含图像，您可以这样做。请注意，我不知道您的轮播代码，并且您几乎肯定必须修改轮播库才能处理这些更改。

<r:script>
    window.carouselImages = [
        {
            image: '${r.external(url:'images/carousel/image1.jpg'}.encodeAsJavaScript();}',
            thumbnail: '${r.external(url:'images/carousel/image1.thumbnail.jpg'}.encodeAsJavaScript();}'
        },
        ...
    ];
</r:script>
<r:resource url="js/carousel.js"/>

然后在 carousel.js 中引用 window.carouselImages 来获取图像数组。它也应该可以翻转顺序，并使用 carousel.js 中的某些方法来添加图像，如下所示:

<r:script>
    carousel.addImage('${r.external(url:'images/carousel/image1.jpg'}.encodeAsJavaScript();}', '${r.external(url:'images/carousel/image1.thumbnail.jpg'}.encodeAsJavaScript();}');
    ...
</r:script>

您可以通过循环文件列表来改进这一点，而不是显式编码每个图像(我在下面发布的 JIRA 中给出了示例)。

<小时/>

最后，如果您不打算使用任何缓存或文件操作插件(因此文件总是以相同的 URL 结束)，您可以简单地从 Controller 或服务方法内循环文件，对每一个调用 r.img()。这将确保它们被复制到static目录。 r.img() 的返回值可以忽略。