如何通过bind-style动态修改列组件的background

jjsun

页面有一个row组件,内有3列,如何通过lie组件col的bind-style设置background?        var Model = function(){
                this.callParent();
               
                this.colStyle= justep.Bind.computed(function() {
                    return this.getColStyle('1');
                }, this);  

        };


        Model.prototype.getColStyle = function(fn){
                var style = "url('" + require.toUrl("./img/" + fn +".jpg") +"') no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0);";
                console.log("getColStyle,fn="+fn+",style="+style);
                return style;
        };

col组件的bind-style设置为 {background:colStyle}
   <div class="x-col" xid="col1" bind-style="{background:colStyle}"></div>
刷新页面,函数getColStyle执行, colStyle有值 = url('/x5/UI2/v_d85e47c842e1432ba45d7b0d4b62beffl_zh_CNs_d_m/itemshow/img/1.jpg') no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0);
但页面上图片没有加载


把上述函数的返回值 url('/x5/UI2/v_d85e47c842e1432ba45d7b0d4b62beffl_zh_CNs_d_m/itemshow/img/1.jpg') no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0); 显示设置到style中,可以加载图片,说明图片路径正常,但通过bind-style方式加载失败

动态设置不显示

手动设置可显示

请问如何通过bind-style动态调整background?

jishuang

bind-style="{background:url('/x5/UI2/v_d85e47c842e1432ba45d7b0d4b62beffl_zh_CNs_d_m/itemshow/img/1.jpg') no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0)}"

看看会显示吗？
F12打开浏览器的开发人员调试工具跟踪定位一下看看col上生成的样式是什么

jjsun

jishuang 发表于 2017-11-27 17:33
bind-style="{background:url('/x5/UI2/v_d85e47c842e1432ba45d7b0d4b62beffl_zh_CNs_d_m/itemshow/img/1. ...

直接设置到bind-style,报错
<div class="x-col" xid="col1" bind-style="{background:url('/x5/UI2/v_d85e47c842e1432ba45d7b0d4b62beffl_zh_CNs_d_m/itemshow/img/1.jpg') no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0)}"></div>
执行时报错:
SyntaxError: Unable to parse bindings.
Bindings value: style:{background:url('/x5/UI2/v_d85e47c842e1432ba45d7b0d4b62beffl_zh_CNs_d_m/itemshow/img/1.jpg') no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0)}
Message: Unexpected identifier;
View: undefined;
    at Function (native)
    at u.utils.extend.parseBindingsString (http://localhost:8080/x5/UI2/v_0b95e9a6b6e94eb2bd84023a594b38ddl_zh_CNs_d_m/system/core.min.js:71:147222)
    at u.utils.extend.getBindingAccessors (http://localhost:8080/x5/UI2/v_0b95e9a6b6e94eb2bd84023a594b38ddl_zh_CNs_d_m/system/core.min.js:71:146720)
    at Object.u.dependentObservable.disposeWhenNodeIsRemoved [as readFunction] (http://localhost:8080/x5/UI2/v_0b95e9a6b6e94eb2bd84023a594b38ddl_zh_CNs_d_m/system/core.min.js:71:149527)
    at Object.u.utils.extend.evaluateImmediate (http://localhost:8080/x5/UI2/v_0b95e9a6b6e94eb2bd84023a594b38ddl_zh_CNs_d_m/system/core.min.js:71:134032)
    at Object.d (http://localhost:8080/x5/UI2/v_0b95e9a6b6e94eb2bd84023a594b38ddl_zh_CNs_d_m/system/core.min.js:71:131721)
    at Object.u.computed.u.dependentObservable (http://localhost:8080/x5/UI2/v_0b95e9a6b6e94eb2bd84023a594b38ddl_zh_CNs_d_m/system/core.min.js:71:135156)
    at l (http://localhost:8080/x5/UI2/v_0b95e9a6b6e94eb2bd84023a594b38ddl_zh_CNs_d_m/system/core.min.js:71:149476)
    at a (http://localhost:8080/x5/UI2/v_0b95e9a6b6e94eb2bd84023a594b38ddl_zh_CNs_d_m/system/core.min.js:71:148534)
    at o (http://localhost:8080/x5/UI2/v_0b95e9a6b6e94eb2bd84023a594b38ddl_zh_CNs_d_m/system/core.min.js:71:148082)
Uncaught SyntaxError: Unable to parse bindings.
Bindings value: style:{background:url('/x5/UI2/v_d85e47c842e1432ba45d7b0d4b62beffl_zh_CNs_d_m/itemshow/img/1.jpg') no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0)}
Message: Unexpected identifier;
View: undefined;

jishuang

只设置前面的url看看

jjsun

jishuang 发表于 2017-11-30 08:52
只设置前面的url看看

什么叫“前面的URL”？具体应如何设置啊？能否提供一个正确的方法？