I have this directive:
.directive('img', function () {
return {
restrict: 'E',
link: function (scope, elem, attr) {
if (attr.src && attr.type === "extension"){
var url = "chrome-extension://" + chrome.runtime.id + attr.src
// console.log(url)
elem[0].removeAttribute('src')
// elem[0].setAttribute("src", url)
// elem[0].dataset.ngSrc = url
console.log(elem[0])
console.log(elem[0].src)
}
}
};
})
profile.html:
<tr ng-repeat="integration in profile.integrations">
<td>
<!-- <h3>{{integration.provider}}</h3> -->
<img type="extension" src="/images/icons/{{integration.provider}}.png" alt="" width="50px">
</td>
</tr>
My console log still shows the src and does not remove it nor will replace it. It's something to do with ng-repeat because this works on another image perfectly.
You are basically recreating one of angular's convenience directives that was made for the situation where you use an expression in the src attribute. Use ng-src instead of src, and you won't need your img directive
ng-src doc: https://docs.angularjs.org/api/ng/directive/ngSrc
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
<img type="extension"
ng-src="/images/icons/{{integration.provider}}.png" alt="" width="50px">
As noted by runTarm in the comments this does not add the chrome-extension protocol to the image url, to do that you need to do two things
Adding to the whitelist
//modified from http://stackoverflow.com/a/15769779/560593
var app = angular.module( 'myApp', [] );
app.config( ['$compileProvider', function( $compileProvider ) {
//adds chrome-extension to the whitelist
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
]);
app.run(function($rootScope){
//put the id on the rootScope so we can use it in expression
$rootScope.extensionUrl = "chrome-extension://"+chrome.runtime.id;
});
HTML
<img ng-src="{{extensionUrl}}/images/icons/{{integration.provider}}.png" alt="" width="50px">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.