在requireJS模塊中加載模板圖像

Question

我將文本插件與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傳輸”，這是有道理的，但我不知道如何傳遞它。

---

我也對實現任務的各種方法持開放態度。

謝謝。

Answer 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';

我想你明白了。

可能的問題是優化版本。 尚不知道在這種情況下會發生什么。

Answer 2

使用此插件堆棧中的圖像插件。

它不是官方的，但是應該做的工作。