从javascript加载图像 [英] load images from javascript

问题描述

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

In my Grails app, I have a dir web-app/images/carousel/slides that contains files such as:

• foo.png
• foo.thumbnail.png
• bar.png
• bar.thumbnail.png

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

My app is using the resources Grails plugin, and the main images are loaded in a GSP using one of it's tags:

<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.

I attempt to load the thumbnail images from JavaScript by constucting a path such as /myapp/static/images/carousel/slides/foo.thumbnail.png. But when I attempt to display one of these images, I get a 404.

类似地，如果在浏览器的地址栏中输入以下路径

Similarly, if enter the following path in the browser's address bar

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

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

the image displays correctly, but if I enter

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

我得到404.为什么我的缩略图在相同的源目录中时在运行时在同一路径上不可用?我怀疑答案与以下事实有关:使用资源框架加载主图像，而我尝试从JavaScript加载缩略图.

I get a 404. Why are my thumbnail images not available at the same path at runtime, given that they're in the same source directory? I suspect the answer has something to do with the fact that the main images are loaded using the resources framework whereas I attempt to load the thumbnails from JavaScript.

推荐答案

您大多回答了自己的问题:如果您不以某种方式使用资源引用图像，那么它们将不会得到处理.

You mostly answered your own question: if you don't reference the images using resources in some way, then they don't get processed.

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

Your best bet is to create a resources module that contains a list of all the images. The add this resource to the page.

// 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/**'之类的方法，但是文档没有说明是否可行.

Now, the module description is a DSL, so you might be able to use some sort of file loop to automatically add all the files, but I'm not 100% sure how. You also might try something like '/images/carousel/**', but the docs don't say if that would work or not.

另外，我要提到的是，如果您使用任何基于缓存的资源插件，这将无济于事.然后，您将需要手动调用r.img()并将其设置在JavaScript中，如下所示(如果可行):

Also, I should mention, if you use any of the caching-based resources plugins, this won't help. You will then need to manually call r.img() and set it within your JavaScript, something like this (if it works):

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

这是因为使用例如 cached-resources 生成的URL通常是文件内容的哈希值，以允许长期缓存.它们通常仅与原始文件名间接相关.

This is because the URLs generated using, for example, cached-resources, are often hashes of the file content to allow for long-term caching. They usually are only indirectly related to the original filename.

根据以下评论进行更新:

Update based on comment below:

要远程加载常见的JS，但要包含图像，您可以执行以下操作.意识到，我不知道您的轮播代码，几乎可以肯定，您将不得不修改轮播库以处理这些更改.

To load a common JS remotely, but include the images, you could do something like this. Realize, I don't know your carousel code, and you will almost certainly have to modify the carousel library to handle these changes.

<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中使用某种方法添加图像，也应该是可能的，例如:

Then in carousel.js you reference window.carouselImages to get your array of images. It also should be possible it flip the order, and use some method within carousel.js to add images, like this:

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

您可以通过遍历文件列表而不是对每个图像进行显式编码来改善这一点(示例在下面发布的JIRA中已给出).

You can improve this by looping over the file list instead of encoding each image explicitly (and example was given in the JIRA I posted below).

最后，如果您不打算使用任何缓存或文件操作插件(因此文件始终以相同的URL结尾)，则只需从控制器或服务方法中循环遍历文件即可. ，分别对每个调用r.img().这样可以确保将它们复制到static目录. r.img()的返回值可以忽略.

Finally, if you aren't going to use any of the caching or file manipulation plugins (so the files always end up at the same URL), you could just simply loop over the files from within the controller or a service method, calling r.img() on each one. This would ensure that they are copied to the static directory. The return value from r.img() can be ignored.

这篇关于从javascript加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！