在我的 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 加载缩略图。
最佳答案
您主要回答了自己的问题:如果您不以某种方式使用资源引用图像,那么它们就不会被处理。
最好的选择是创建一个包含所有图像列表的资源模块。将此资源添加到页面。
// 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()
的返回值可以忽略。
关于grails - 从 JavaScript 加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8780395/