title: Can I get Zurb Foundation to handle dynamic images with data-interchange?
body: <p>We're currently using Zurb Foundation on a site and are looking to use data-interchange instead of background images.</p>
  
  <p>While it handles images with an image extension (JPG, PNG) it chokes whenever we try to use our CMS' dynamically created images.</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;!--[if IE 9]&gt;&lt;html class="lt-ie10" lang="en"&gt; &lt;![endif]--&gt;
  &lt;html class="no-js" lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
      &lt;title&gt;data-interchange test&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.css"/&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css"/&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="row"&gt;&lt;div class="large-12 columns"&gt;
      &lt;div data-interchange="[http://bus.wisc.edu/_images/template/global/thin/logo-horizontal.png, (default)]" style="width:100%;height:400px;"&gt;
          JPG extension
      &lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="row"&gt;&lt;div class="large-12 columns"&gt;
      &lt;div data-interchange="[https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=640&amp;h=150, (default)]" style="width:100%;height:400px;"&gt;
          Dynamic image
      &lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation/foundation.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation/foundation.interchange.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).foundation();
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Based upon <a href="http://foundation.zurb.com/docs/components/interchange.html" rel="nofollow">their documentation on Interchange</a>, it sounds like they're treating it as content and trying to load it in as such:</p>
  
  <blockquote>
    <p>When you add a data-interchange attribute containing image paths (.jpg, .jpeg, .png, .gif, .bmp, .tiff), instead of replacing the element content it will set a background-image css property with the corresponding path.</p>
  </blockquote>
  
  <p>What it doesn't have is a way to tell Foundation to treat it as an image, which is what I'm hoping for.</p>
  
  <p>Is there a way to tell Foundation to treat URLs as a particular type (image vs. content)?</p>