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.

Looks like a server configuration issue to me. When you modify the `src` attribute, the browser fetches the image from the server and the server tells the browser it is a `text/html` resource. — Louis, Apr 25 '14 at 12:15

score 1 · Answer 1 · answered Jul 26 '14 at 04:41

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.

thank you so much for the suggestions and comments. i was away for a while and in the meantime a decision was made to stop using require js all together for the project, which pretty much left, due to the lack of a time, this issue unresolved for me. i can't say at this point which approach would have worked, but +1 from me for the time you spent writing your answers. — Radu, Jul 30 '14 at 07:58

score 0 · Answer 2 · answered Jul 26 '14 at 16:16

0

Use the image plugin from this stack of plugins.

It is not official, but should do the work.

answered Jul 26 '14 at 16:16

jgomo3

1,153
1
13
26

Loading template images in requireJS module

2 Answers2