Question

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

foo.png
foo.thumbnail.png
bar.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'
        ...
    }
}

然后在你的GSP中

<r:require module="carousel"/>

现在，模块描述是一个DSL，所以你可以使用某种文件循环来自动添加所有文件，但我不是100％肯定如何。您也可以尝试类似'/images/carousel/**'的内容，但文档并未说明这是否有用。

另外，我应该提一下，如果你使用任何基于缓存的资源插件，这都无济于事。然后，您需要手动调用r.img()并在JavaScript中设置它，如下所示（如果有效）：

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

这是因为使用例如 cached-resources 生成的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结尾），您只需从控制器或服务方法中循环遍历文件即可，在每一个上调用r.img()。这将确保将它们复制到static目录。 r.img()的返回值可以忽略。

Answer 2

您可以使用HTML5的数据 - *属性

<element data-*="somevalue">

以下是您的图片位于/ grails-app / assets / images：

的示例

在页面（即index.gsp）中，您必须添加以下内容：

从javascript中你需要做的就是：

<script>
    var calImg = document.getElementById('calendar-icon').getAttribute('data-calendaricon');
</script>

非常简单，而且这是一种干净的方法：）

从javascript加载图片

2 个答案: