Loading template images in requireJS module

Question

I'm using the text plugin with requireJS in order to load some html into the page. I've defined a modules that is responsible for this:

define(['jquery', 'text!/path/to/template/template_name.html'], function($, rciTpl){

Inside the module I have a method that, after receiving data from an ajax call ads items to the DOM:

var buffer = $.map(data, function(d, i){
            //clone the template;
            var tpl = template.clone();

            //set the url
            tpl.find('a.lt, a.la').attr('href', d.url);

            //set the title
            tpl.find('a.lt').text(d.title);

            //return the raw node
            return(tpl.get());
        });

$('#myContainer').append(buffer);

Everything works ok so far. Problem appears when I want to add an image dynamically to my template. Something like this:

tpl.find('img').attr('src', 'item_img_path.svg');

The error that I get in the browser's console is: "Resource interpreted as Image but transferred with MIME type text/html", which makes sense, but I don't know how to get passed it.

---

I am also opened to different approaches in achieving my task.

Thanks.

Answer 1

As the plugin documentation says: it have some limitations https://github.com/requirejs/text#xhr-restrictions

And the name itself suggest difficulties for other resources not being text.

A different aproach would be determine the script location of your module and issue a request to the image in that place. It seems counter-intuitive from the RequireJS point of view, but i've seem it in action with OpenLayers

OpenLayers is a dependency of my app. I set it in the shim config. Some how it finds its images and styles. Reading its code i learned it uses this so called getScriptLocation method:

_getScriptLocation: (function() {
    var r = new RegExp("(^|(.*?\\/))(OpenLayers[^\\/]*?\\.js)(\\?|$)"),
        s = document.getElementsByTagName('script'),
        src, m, l = "";
    for(var i=0, len=s.length; i<len; i++) {
        src = s[i].getAttribute('src');
        if(src) {
            m = src.match(r);
            if(m) {
                l = m[1];
                break;
            }
        }
    }
    return (function() { return l; });
})()

See how it determine the css to use:

this.theme = OpenLayers._getScriptLocation() + 'theme/default/style.css';

I think you got the idea.

The possible problems would be the optimized versions. Don't know yet what will happen in that case.

Answer 2

Use the image plugin from this stack of plugins.

It is not official, but should do the work.