title: load images from javascript
body: <p>In my Grails app, I have a dir <code>web-app/images/carousel/slides</code> that contains files such as:</p>
  
  <ul>
  <li>foo.png</li>
  <li>foo.thumbnail.png</li>
  <li>bar.png</li>
  <li>bar.thumbnail.png</li>
  </ul>
  
  <p>My app is using the resources Grails plugin, and the main images are loaded in a GSP using one of it's tags:</p>
  
  <pre><code>&lt;r:img file="carousel/slides/foo.png"/&gt;
  </code></pre>
  
  <p>which generates:</p>
  
  <pre><code>&lt;img src="/myapp/static/images/carousel/slides/foo.png"&gt;
  </code></pre>
  
  <p>I attempt to load the thumbnail images from JavaScript by constucting a path such as <code>/myapp/static/images/carousel/slides/foo.thumbnail.png</code>. But when I attempt to display one of these images, I get a 404.</p>
  
  <p>Similarly, if enter the following path in the browser's address bar</p>
  
  <pre><code>http://localhost:8080/myapp/static/images/carousel/slides/foo.png
  </code></pre>
  
  <p>the image displays correctly, but if I enter</p>
  
  <pre><code>http://localhost:8080/myapp/static/images/carousel/slides/foo.thumbnail.png
  </code></pre>
  
  <p>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.</p>