UI-grid net :: ERR_INVALID_URL，同时基于COL_FIELD有条件地显示base64图像

Question

I am using ui-grid to display a table in which I am showing avatar as the first column. The avatar image is base64 image displayed conditionally as per col_field value from the back-end.

If the col_field is null then display the default image which is in base64 (available in the scope) else the image from the col_field itself.

issue :

The default image is available in the scope and its displayed correctly but I get the console error net::ERR_INVALID_URL

error :

data:image/jpg;base64,{{COL_FIELD!=null ? COL_FIELD : 'iVBORw0KGgoAAAANSUhE…NqS+jMdu/p7D8dz14x323NdD+uW/+WonqAL75HX/wswAH3/1hmUDbAiAAAAAElFTkSuQmCC'}} net::ERR_INVALID_URL

here is the code snippet

columnDefs : [
{
    field : 'profilImage',
    cellTemplate : '<div class="thumbnail-image-list" > \
                    <img 
                         style="vertical-align:middle;" 
                         width="16" height="16" 
                         alt="{{row.entity.name}}"
                         src="data:image/jpg;base64,{{COL_FIELD!=null ? COL_FIELD : \'' + $scope.defaultImageHexCode + '\'}}"/>
                   </div>',
},

Answer 1

由于您正在使用插值，因此请使用ng-src而不是src绑定属性。