CODEWITHSUNDEEP
javascriptangularjs
ngplayground
ngplayground

Reputation: 21617

AngularJS dynamic image sources

<img src="{{ twt.display }}"/>

I have the above image tag where the src is in the scope but when I look at the browser console log it shows the following

Resource interpreted as Image but transferred with MIME type text/html: "http://example.com/%7B%7Btwt.display%7D%7D".

The images do show as intended but I wanted to know if there was a way of stopping this message appearing?

Upvotes: 21

Views: 25237

Answers (1)

charlietfl
charlietfl

Reputation: 171679

Use ng-src to avoid strange undeliverable requests being made by browser.

Once the expression in ng-src is resolved, it will update the src for the tag,

<img ng-src="{{twt.display}}"/>

Upvotes: 51

Related Questions