动态加载角度指令中的图像资源始终在初始加载时出错

Question

我已经建立了一个指令，用于将3位数的ISO-3316国家/地区代码转换为国旗和国家/地区名称。我这样使用它：

<country-with-flag data="840">

我的指示如下：

.directive('countryWithFlag', ['countryCodes', function(countryCodes) {
    return {
        scope: {
            data: '='
        },
        restrict: 'E',
        template: '<img src="assets/images/flags/{{data | numericToAlphaCode}}.png"> {{data | numericToCountry}}',
    }
}])

numericToAlphaCode是一个过滤器，可以将840转换为3316-alpha2代码，在此实例中为"US"。

该指令导致：

这很好用，除了，当页面加载时我在控制台中有一个错误，然后将表达式转换成有用的东西：

为什么会发生这种情况？如何避免生成此错误？我假设我需要在link中执行某些操作，但我对此如何工作有点困惑，特别是因为错误发生在link甚至被调用之前。

Answer 1

尝试使用ng-src，它应该阻止加载资产，直到内插字符串

template: '<img ng-src="assets/images/flags/{{data | numericToAlphaCode}}.png"> {{data | numericToCountry}}',