我正在使用带有requireJS的文本插件,以便将一些html加载到页面中。 我已经定义了一个负责这个的模块:
define(['jquery', 'text!/path/to/template/template_name.html'], function($, rciTpl){
在模块内部我有一个方法,在从ajax接收数据后,将广告项目发送到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);
到目前为止一切正常。当我想动态地向我的模板添加图像时出现问题。像这样:
tpl.find('img').attr('src', 'item_img_path.svg');
我在浏览器控制台中遇到的错误是:"资源被解释为图像,但是使用MIME类型text / html"进行传输,这是有道理的,但我不知道如何通过它。
我也接受了不同的方法来完成我的任务。
感谢。
答案 0 :(得分:1)
正如插件文档所说:它有一些限制https://github.com/requirejs/text#xhr-restrictions
名称本身表明其他资源不是文本的困难。
另一种方法是确定模块的脚本位置,并向该位置的图像发出请求。从 RequireJS 的角度来看,这似乎是违反直觉的,但我似乎在使用 OpenLayers
进行操作 OpenLayers 是我的应用的依赖项。我在shim
配置中设置它。一些如何找到它的图像和样式。阅读我学到的代码使用了这个所谓的getScriptLocation
方法:
_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; });
})()
了解它如何确定要使用的 css :
this.theme = OpenLayers._getScriptLocation() + 'theme/default/style.css';
我认为你有了这个主意。
可能出现的问题是优化版本。不知道在那种情况下会发生什么。
答案 1 :(得分:0)
使用this stack of plugins中的图片插件。
这不是官方的,但应该做的工作。